Web性能優化系列（3）：如何延遲加載JS

時間 2019-11-13

標籤 web 性能優化系列如何延遲加載欄目 HTML 简体版

原文原文鏈接

本文由伯樂在線 - J.c 翻譯，sunbiaobiao 校稿。未經許可，禁止轉載！
英文出處：www.feedthebot.com。歡迎加入翻譯小組。javascript

延遲加載JavaScript

JavaScript的延遲加載是那些在web上，能讓你想抓狂地去尋找解決方案的問題之一。css

不少人說「那就用defer」或「async」，甚至有些人說「那就將你的javascript代碼放在頁面代碼底部」。html

上述方法都不能解決在web頁面徹底加載後，再加載外部js的問題。上述方法也會偶爾讓你收到Google頁面速度測試工具的「延遲加載javascript」警告。因此這裏的解決方案將是來自Google幫助頁面的推薦方案。java

如何延遲加載JavaScript

下面是Google推薦的代碼。這些代碼應被放置在</body>標籤前(接近HTML文件底部)。另外，我將外部JS文件名突出顯示。web

 
         <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.複製上面代碼app

2.粘貼代碼到HTML的</body>標籤前 (靠近HTML文件底部)async

3.修改「defer.js」爲你的外部JS文件名工具

4.確保你文件路徑是正確的。例如：若是你僅輸入「defer.js」，那麼「defer.js」文件必定與HTML文件在同一文件夾下。測試

這段代碼能用在哪裏(和哪裏不能用)

這段代碼直到文檔加載完纔會加載指定的外部JS文件。所以，不該該把那些頁面正常加載須要依賴的javascript代碼放在這裏。而應該將JavaScript代碼分紅兩組。一組是因頁面須要而當即加載的javascript代碼，另一組是在頁面加載後進行操做的javascript代碼(例如添加click事件或其餘東西)。這些需等到頁面加載後再執行的JavaScript代碼，應放在一個外部文件，而後再引進來。

例如，在這頁面我使用上述文件進行延遲加載 - Google analytics，Viglink (我怎麼賺錢)，和顯示在底部的Google+徽章(個人社交媒體)。這對於我來講，沒有理由在初始頁面加載時加載這些文件，由於初始階段都不必加載上述可有可無的內容。也許在你的頁面中也有一樣性質的文件。那你難道想讓用戶在看到網頁內容以前，還要等待這些文件加載嗎？

爲何不使用其它方法呢？

直接插入代碼、將腳本放置在底部和使用「defer」或「async」，這幾種方法都不能達到先加載頁面後加載JS的目的，並且它們確定不能在各個瀏覽器上表現一致。

它爲何重要？

它的重要性是因爲Google將頁面速度做爲排名因素之一併且用戶也但願能快速加載頁面。另外對於移動搜索引擎優化也是很是重要的。Google根據頁面最初加載時間來衡量頁面速度。這意味着你必須儘量快地獲得頁面的load事件。頁面最初加載時間是Google用來評價你的web頁面質量(並且別忘記用戶在等待頁面的加載)。Google積極推動和推薦將上述的可有可無的內容按重要性排列，讓全部資源(js,css,images等)脫離關鍵的渲染路徑，並且這樣作是值得去努力的。若是這樣能取悅用戶，且讓Google開心，你很應該這樣作。