js延遲加載的方式有哪些?


共有:defer和async、動態創建DOM方式(用得最多)、按需異步載入js

defer屬性:(頁面load后執行)

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

<script> 元素中設置 defer 屬性,等於告訴瀏覽器立即下載,但延遲執行

<head>
    <script src="test1.js" defer="defer"></script>
    <script src="test2.js" defer="defer"></script>
</head>

  

async屬性:(頁面load前執行)

HTML5 為 <script>標簽定義了 async屬性。與defer屬性類似,都用於改變處理腳本的行為。同樣,只適用於外部腳本文件。 
目的:不讓頁面等待腳本下載和執行,從而異步加載頁面其他內容。異步腳本一定會在頁面 load 事件前執行。不能保證腳本會按順序執行。

<head>
    <script src="test1.js" async></script>
    <script src="test2.js" async></script>
</head>
<body>

  

動態創建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>  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM