欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS延遲加載的幾種方式小結(jié)

 更新時(shí)間：2024年08月20日 11:51:56   作者：meijory  
JS延遲加載,也就是等頁(yè)面加載完成之后再加載 JavaScript 文件,JS延遲加載有助于提高頁(yè)面加載速度,本文小編給大家介紹了JS延遲加載的幾種方式小結(jié),感興趣的小伙伴跟著小編一起來(lái)看看吧

一般有以下幾種方式：

1. defer 屬性

HTML 4.01 為 <script>標(biāo)簽定義了 defer屬性。
用途：表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō)，腳本會(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>

說(shuō)明：雖然<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屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。
目的：不讓頁(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延遲方法

setTimeout(function() {
  // 執(zhí)行延遲加載的代碼或加載資源
}, 2000); // 在 2000 毫秒（2 秒）后執(zhí)行

6.讓JS最后加載

把js外部引入的文件放到頁(yè)面底部，來(lái)讓js最后引入，從而加快頁(yè)面加載速度

到此這篇關(guān)于JS延遲加載的幾種方式小結(jié)的文章就介紹到這了,更多相關(guān)JS延遲加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論