前端：JS延長(zhǎng)加載的方式有哪些？

么是JS延遲加載？

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

為什么讓JS實(shí)現(xiàn)延遲加載？

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

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

·defer屬性

·async屬性

·動(dòng)態(tài)創(chuàng)建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

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

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

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

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

2、async屬性

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

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

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

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

缺點(diǎn)：不能控制加載的順序

3、動(dòng)態(tài)創(chuàng)建DOM方式

//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近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(){	//回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
	console.log(“腳本加載完成")
});

5、使用setTimeout延遲方法的加載時(shí)間延遲加載js代碼，給網(wǎng)頁(yè)加載留出更多時(shí)間

<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外部引入的文件放到頁(yè)面底部，來讓js最后引入，從而加快頁(yè)面加載速度例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁(yè)面加載前該js腳本就會(huì)被加載入頁(yè)面，而放入body中，則會(huì)按照頁(yè)面從上倒下的加載順序來運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁(yè)面底部，來讓js最后引入，從而加快頁(yè)面加載速度。

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

//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近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>

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

使用此段代碼的步驟：

6.1）復(fù)制上面代碼

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

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

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

注意：

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

：jQuery 對(duì)CSS操作

1、通過 jQuery，可以很容易地對(duì) CSS 元素進(jìn)行操作

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

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

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

.獲取元素

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

<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'))
    //標(biāo)簽名選擇器
    console.log($('li'))
    //結(jié)構(gòu)選擇器
    console.log($('li:nth-child(odd)'))//拿到奇數(shù)個(gè)li
    console.log($('li:nth-child(even)'))//拿到偶數(shù)個(gè)li
  </script>
</body>

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

篩選器：對(duì)獲取到的元素進(jìn)行篩選操作

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5
      <i>子兩級(jí)</i>
    </li>
    <i>子一級(jí)</i>
    <span>我是 ul 內(nèi)的一個(gè) span 標(biāo)簽</span>
    <li>6</li>
    <li>7
      <p>
        <i>子三級(jí)</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())//獲取到第一個(gè) li
    //2.last.()
    console.log($('li').last())//獲取到最后一個(gè) li
    //3.eq(索引)
    console.log($('li').eq(3))//獲取索引為3的選擇器
    //4.next.()
    console.log($('span').next())//獲取span標(biāo)簽下一個(gè)的選擇器
    //5.nextAll()
    console.log($('span').nextAll())//獲取span標(biāo)簽下面所有的選擇器
    //6.prev()
    console.log($('span').prev())//獲取span標(biāo)簽上一個(gè)的選擇器
    //7.prevAll()
    console.log($('span').prevAll())//獲取span標(biāo)簽上面所有的選擇器
    //8.parent()
    console.log($('span').parent())//獲取的是span的父級(jí)元素-----ul
    //9.parents()
    console.log($('span').parents())//獲取的是span所有的父級(jí)元素------直到html標(biāo)簽
    //10.siglings()
    console.log($('span').siblings())//獲取的是span所有的兄弟元素-----不包括span本身
    //11.find(選擇器)
    console.log($('ul').find('i'))//獲取到的是 ul 后代中所有 i 標(biāo)簽
  </script>
</body>

二.操作元素內(nèi)容

1.操作元素文本內(nèi)容

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

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()獲取內(nèi)容
    console.log($('div').html())
    //使用html()設(shè)置內(nèi)容
    console.log($('div').html('哈哈'))
    console.log($('div').html('<h1>皮蛋</h1>'))
  </script>
</body>

ps:html()可以解析標(biāo)簽

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()獲取內(nèi)容
    console.log($('div').text())
    //使用text()設(shè)置內(nèi)容
    console.log($('div').text('哈哈'))
    console.log($('div').text('<h1>皮蛋</h1>'))
  </script>
</body>

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

val()

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

ps:通常設(shè)置input

三.操作元素屬性

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

1.attr()
獲取屬性

語(yǔ)法：元素.attr(你要獲取的屬性名)
返回值：該屬性名對(duì)應(yīng)的屬性值
設(shè)置屬性
語(yǔ)法：元素.attr(屬性名，屬性值)

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

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

2.removeAttr()
語(yǔ)法：元素集合.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(‘你要?jiǎng)h除的類名’)---------刪除類名
toggleClass(‘類名’)---------類名如果在這個(gè)元素上就刪除，反之增加

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>

設(shè)置

  <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>

批量設(shè)置樣式

  <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()獲取元素?zé)o論行類還是非行類都能獲取到

六.獲取元素尺寸

width()&height()-------------------獲取元素區(qū)域內(nèi)容的尺寸

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

outerWidth(true)&outerHeight(true)獲取元素區(qū)域內(nèi)容+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>
    //獲取元素區(qū)域內(nèi)容的尺寸
    console.log($('div').width())
    console.log($('div').height())
    console.log('------------------')
    //獲取元素區(qū)域內(nèi)容+padding的尺寸
    console.log($('div').innerWidth())
    console.log($('div').innerHeight())
    console.log('------------------')
    //獲取元素區(qū)域內(nèi)容+padding+border的尺寸
    console.log($('div').outerWidth())
    console.log($('div').outerHeight())
    console.log('------------------')
    //獲取元素區(qū)域內(nèi)容+padding+border+margin的尺寸
    console.log($('div').outerWidth(true))
    console.log($('div').outerHeight(true))
  </script>
</body>

以上就是jQuery對(duì)DOM的常用操作

在線咨詢

上一篇：jQuery - 刪除元素
下一篇：HTML中的元素使用方法2-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

前端：JS延長(zhǎng)加載的方式有哪些？

1、defer屬性

2、async屬性

3、動(dòng)態(tài)創(chuàng)建DOM方式