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

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

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

一般有以下幾種方式：

1. defer 屬性

HTML 4.01 為 <script>標簽定義了 defer屬性。
用途：表明腳本在執(zhí)行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完畢之后再執(zhí)行。

在<script> 元素中設置 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>標簽后再執(zhí)行。

HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實當中，延遲腳本并不一定會按照順序執(zhí)行。

defer屬性只適用于外部腳本文件。支持 HTML5 的實現(xiàn)會忽略嵌入腳本設置的 defer屬性。

2. async 屬性

HTML5 為 <script>標簽定義了 async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。
目的：不讓頁面等待腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容。

異步腳本一定會在頁面 load 事件前執(zhí)行。
不能保證腳本會按順序執(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一樣，都不會阻塞其他資源下載，所以不會影響頁面的加載。
缺點：不能控制加載的順序

3.動態(tài)創(chuàng)建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(){//回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)  
      console.log("腳本加載完成")  
});

5.使用setTimeout延遲方法

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

6.讓JS最后加載

把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度

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

相關文章

最新評論