js實現延遲加載的幾種方法詳解

這是一個面試經常問到的問題：js的延遲加載方法 (js的延遲加載有助于提高頁面的加載速度)

主要考察對程序的性能方面是否有研究，程序的性能是一個項目不斷地追求的，通常也是項目完成后需要長期做的一件事情，像騰訊QQ依然對程序的性能不斷地做優化，讓用戶的體驗更好，性能優化的核心思想就是快，可以預先準備數據（如緩存的使用），可以按需獲取，可以分段獲取等都是常見的優化手段。

解題思路 :

1.defer屬性

<script src="file.js" defer> </script>

瀏覽器會并行下載 file.js和其它有 defer 屬性的script，而不會阻塞頁面后續處理。defer屬性在IE 4.0中就實現了，超過10多年了！Firefox從 3.5 開始支持defer屬性 。

注：所有的defer腳本保證是按順序依次執行的。

2.async屬性

<script src="file.js" async> </script>

async屬性是HTML5新增的。作用和defer類似，但是它將在下載后盡快執行，不能保證腳本會按順序執行。它們將在onload 事件之前完成。

Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 屬性。可以同時使用 async 和 defer，這樣IE 4之后的所有IE 都支持異步加載。

3.動態創建DOM方式 (使用的最多)

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

PS： 這里插一句addEventListener() 也是常考的知識點之一：

    addEventListener() 方法用于向指定元素添加事件句柄。

    使用 removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。

    語法：element.addEventListener(event, function, useCapture)

1.         event （必須）字符串，指定事件名。注意: 不要使用 “on” 前綴。 例如，使用 “click” ,而不是使用 “onclick”。
2.         function （必須）指定要事件觸發時執行的函數。當事件對象會作為第一個參數傳入函數。 事件對象的類型取決于特定的事件。例如， “click” 事件屬于 MouseEvent(鼠標事件) 對象。
3.         useCapture （可選）布爾值，指定事件是否在捕獲或冒泡階段執行。【true：事件句柄在捕獲階段執行； false：默認，事件句柄在冒泡階段執行】

<p>該實例使用 addEventListener() 方法來向按鈕添加點擊事件。</p> 
<button id="myBtn">點我</button> 
<p id="demo"></p> 
<script>
document.getElementById("myBtn").addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});
</script>

效果如圖：

4.使用Jquery的getScript()方法

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

從源碼可以看出，這個方法最后還是調用了jQuery.ajax()來請求了js文件的。

5.使用setTimeout延遲方法的加載時間

延遲加載js代碼，給網頁加載留出時間

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

6.讓js最后加載

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

上述方法5,6也會偶爾讓你收到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”。

使用此段代碼的步驟：

1.     復制上面代碼
2.     粘貼代碼到HTML的標簽前 (靠近HTML文件底部)
3.     修改“defer.js”為你的外部JS文件名
4.     確保你文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

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

若有不足請多多指教！希望給您帶來幫助！

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。如果你想了解更多相關內容請查看下面相關鏈接