前端：JS延長加載的方式有哪些？

么是JS延遲加載？

JS延遲加載，也就是等頁面加載完成之后再加載JavaScript文件

為什么讓JS實現延遲加載？

js的延遲加載有助于提高頁面的加載速度。

Js延遲加載的方式有哪些？一般有以下幾種方式：

·defer屬性

·async屬性

·動態創建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標簽定義了defer屬性。標簽定義了defer屬性元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行標簽定義了defer屬性。

用途：表明腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完畢之后再執行在<script>元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行

<!DOCTYPE html>
<html>
<head>
	<script src="test1.js" defer="defer"></script>
	<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內容-->
</body>
</html>

說明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標簽后再執行HTML5規范要求腳本按照它們出現的先后順序執行。在現實當中，延遲腳本并不一定會按照順序執行defer屬性只適用于外部腳本文件。支持HTML5的實現會忽略嵌入腳本設置的defer屬性

2、async屬性

HTML5 為<script>標簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。

目的：不讓頁面等待腳本下載和執行，從而異步加載頁面其他內容。異步腳本一定會在頁面 load 事件前執行。不能保證腳本會按順序執行

<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
<body>
<!--這里放內容-->
</body>
</html>

async和defer一樣，都不會阻塞其他資源下載，所以不會影響頁面的加載。

缺點：不能控制加載的順序

3、動態創建DOM方式

//這些代碼應被放置在</ body>標簽前(接近HTML文件底部)
<script type="text/javascript">
	function downloadJSAtOnload() {
		varelement = document .createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window. addEventListener)
		window.addEventListener("load" ,downloadJSAtOnload, false);
	else if (window.attachEvent)
		window.attachEvent("onload", downloadJSAtOnload) ;
	else
		window. onload =downloadJSAtOnload;
</script>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回調函數，成功獲取文件后執行的函數
	console.log(“腳本加載完成")
});

5、使用setTimeout延遲方法的加載時間延遲加載js代碼，給網頁加載留出更多時間

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延遲1秒
	})
</script>

6、讓JS最后加載

把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度例如引入外部js腳本文件時，如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。

上述方法2也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。

//這些代碼應被放置在</body>標簽前(接近HTML文件底部)

<script type= "text/javascript">
	function downloadJSAtonload() {
		var element = document.createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window.addEventListener)
		window.addEventListener("load", downloadJSAtOnload, false);
	else if (window.attachEvent )
		window.attachEvent("onload", downloadJSAtonload);
	else window.onload = downloadJSAtOnload;
</script>

這段代碼意思等到整個文檔加載完后，再加載外部文件“defer.js”。

使用此段代碼的步驟：

6.1）復制上面代碼

6.2）粘貼代碼到HTML的標簽前 (靠近HTML文件底部)

6.3）修改“defer.js”為你的外部JS文件名

6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

注意：

這段代碼直到文檔加載完才會加載指定的外部js文件。因此，不應該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進行操作的javascript代碼(例如添加click事件。

：jQuery 對CSS操作

1、通過 jQuery，可以很容易地對 CSS 元素進行操作

2、addClass() - 向被選元素添加一個或多個類

3、removeClass() - 從被選元素刪除一個或多個類

4、toggleClass() - 對被選元素進行添加/刪除類的切換操作

.獲取元素

語法：$(‘選擇器’)--------------獲取元素

<body>
  <ul>
    <li>1</li>
    <li class="a">2</li>
    <li>3</li>
    <li class="b">4</li>
    <li>5</li>
    <li class="a">6</li>
    <li>7</li>
    <li id="box">8</li>
    <li>9</li>
    <li>10</li>
  </ul>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    //id選擇器
    console.log($('#box'))
    //類名選擇器
    console.log($('.a'))
    //標簽名選擇器
    console.log($('li'))
    //結構選擇器
    console.log($('li:nth-child(odd)'))//拿到奇數個li
    console.log($('li:nth-child(even)'))//拿到偶數個li
  </script>
</body>

ps:不管使用任何選擇器，獲取到的元素都是一個元素集合

篩選器：對獲取到的元素進行篩選操作

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5
      <i>子兩級</i>
    </li>
    <i>子一級</i>
    <span>我是 ul 內的一個 span 標簽</span>
    <li>6</li>
    <li>7
      <p>
        <i>子三級</i>
      </p>
    </li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    //1.first()
    console.log($('li').first())//獲取到第一個 li
    //2.last.()
    console.log($('li').last())//獲取到最后一個 li
    //3.eq(索引)
    console.log($('li').eq(3))//獲取索引為3的選擇器
    //4.next.()
    console.log($('span').next())//獲取span標簽下一個的選擇器
    //5.nextAll()
    console.log($('span').nextAll())//獲取span標簽下面所有的選擇器
    //6.prev()
    console.log($('span').prev())//獲取span標簽上一個的選擇器
    //7.prevAll()
    console.log($('span').prevAll())//獲取span標簽上面所有的選擇器
    //8.parent()
    console.log($('span').parent())//獲取的是span的父級元素-----ul
    //9.parents()
    console.log($('span').parents())//獲取的是span所有的父級元素------直到html標簽
    //10.siglings()
    console.log($('span').siblings())//獲取的是span所有的兄弟元素-----不包括span本身
    //11.find(選擇器)
    console.log($('ul').find('i'))//獲取到的是 ul 后代中所有 i 標簽
  </script>
</body>

二.操作元素內容

1.操作元素文本內容

元素.html()----------------------獲取該元素內的內容
元素.text()-----------------------獲取該元素內的文本內容
元素.val()------------------------獲取value內的內容

html()

<body>
  <div>
    hello
    <p>你好，皮蛋！</p>
    world
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    //使用html()獲取內容
    console.log($('div').html())
    //使用html()設置內容
    console.log($('div').html('哈哈'))
    console.log($('div').html('<h1>皮蛋</h1>'))
  </script>
</body>

ps:html()可以解析標簽

text()

<body>
  <div>
    hello
    <p>你好，皮蛋！</p>
    world
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    //使用text()獲取內容
    console.log($('div').text())
    //使用text()設置內容
    console.log($('div').text('哈哈'))
    console.log($('div').text('<h1>皮蛋</h1>'))
  </script>
</body>

ps:text()不可以解析標簽

val()

<body>
  <input type="text" value="皮蛋">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    //使用val()獲取內容
    console.log($('input').val())
    //使用val()設置內容
    $('input').val('哈哈')
  </script>
</body>

ps:通常設置input

三.操作元素屬性

1.attr()------------------------可以設置和獲取和增加元素屬性(一般用于元素的自定義屬性)
2.removeAttr()--------------對元素的屬性進行刪除操作

1.attr()
獲取屬性

語法：元素.attr(你要獲取的屬性名)
返回值：該屬性名對應的屬性值
設置屬性
語法：元素.attr(屬性名，屬性值)

<body>
  <div id="box" hello="hi"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    //設置
    $('div').attr('hello','hah')
    //獲取
    console.log($('div').attr('hello'))
  </script>
</body>

ps:attr()可以修改可以增加

2.removeAttr()
語法：元素集合.removeAttr(你要刪除的屬性名)

<body>
  <div id="box" hello="hi"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    //刪除
    $('div').removeAttr('hello')
  </script>
</body>

四.操作元素類名

addClass(‘你要增加的類名’)---------增加類名
removeClass(‘你要刪除的類名’)---------刪除類名
toggleClass(‘類名’)---------類名如果在這個元素上就刪除，反之增加

addClass()

<body>
  <div class="a b v d"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    $('div').addClass('e')
  </script>
</body>

removeClass()

<body>
  <div class="a b c d"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    $('div').removeClass('a')
  </script>
</body>

toggleClass()

<body>
  <div class="a b c d"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    $('div').toggleClass('f')
  </script>
</body>

五.操作元素樣式

css()----------------------獲取元素樣式

獲取

  <style>
    div{
      height: 200px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div style="width: 100;"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    console.log($('div').css('width'))
    console.log($('div').css('height'))
    console.log($('div').css('background-color'))
  </script>
</body>

設置

  <style>
    div{
      height: 200px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div style="width: 100;"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    $('div').css('width','300px')
    $('div').css('height','300px')
    $('div').css('background-color','red')
  </script>
</body>

批量設置樣式

  <style>
    div{
      height: 200px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div style="width: 100;"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    $('div').css({
      width:50,
      height:50,
      opacity:0.68,
      'background-color':'blue'
    })
  </script>
</body>

ps：jQuery的css()獲取元素無論行類還是非行類都能獲取到

六.獲取元素尺寸

width()&height()-------------------獲取元素區域內容的尺寸

innerWidth()&innerHeight()-----獲取元素區域內容+padding的尺寸
outerWidth()&outerHeight()-----獲取元素區域內容+padding+border的尺寸

outerWidth(true)&outerHeight(true)獲取元素區域內容+padding+border+margin的尺寸

  <style>
    *{
      margin: 0;
      padding: 0%;
    }
    div{
      width: 300px;
      height: 300px;
      padding: 20px;
      border: 20px solid #333;
      margin: 20px;
      background-color: skyblue;
      background-clip: content-box;
    }
  </style>
</head>
<body>
  <div></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    //獲取元素區域內容的尺寸
    console.log($('div').width())
    console.log($('div').height())
    console.log('------------------')
    //獲取元素區域內容+padding的尺寸
    console.log($('div').innerWidth())
    console.log($('div').innerHeight())
    console.log('------------------')
    //獲取元素區域內容+padding+border的尺寸
    console.log($('div').outerWidth())
    console.log($('div').outerHeight())
    console.log('------------------')
    //獲取元素區域內容+padding+border+margin的尺寸
    console.log($('div').outerWidth(true))
    console.log($('div').outerHeight(true))
  </script>
</body>

以上就是jQuery對DOM的常用操作

在線咨詢

上一篇：jQuery - 刪除元素
下一篇：HTML中的元素使用方法2-零基礎自學網頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端：JS延長加載的方式有哪些？