高性能Javascript--腳本的無阻塞加載策略

時間 2019-11-06

標籤高性能 javascript 腳本阻塞加載策略欄目 JavaScript 简体版

原文原文鏈接

Javascript在瀏覽器中的性能，能夠說是前端開發者所要面對的最重要的可用性問題。 javascript

在Yahoo的Yslow23條規則當中，其中一條是將JS放在底部 。緣由是，事實上，大多數瀏覽器使用單進程處理UI和更新Javascript運行等多個任務，而同一時間只能有一個任務被執行。Javascript運行了多長時間，那麼在瀏覽器空閒下來響應用戶交互以前的等待時間就有多長。 css

從基本層面說,這意味着<script>標籤的出現使整個頁面因腳本解析、運行而出現等待。不論實際的 JavaScript 代碼是內聯的仍是包含在一個不相干的外部文件中,頁面下載和解析過程必須停下,等待腳本完成這些處理,而後才能繼續。這是頁面生命週期必不可少的部分,由於腳本可能在運行過程當中修改頁面內容。典型的例子是 document.write()函數,例如: html

<html>
  <head>
    <title>Script Example</title>
  </head> 
  
  <body>
     <p>
        <script type="text/javascript">
           document.write("The date is " + (new Date()).toDateString());
        </script> 
     </p>
  </body> 
</html>

當瀏覽器遇到一個<script>標籤時,正如上面 HTML 頁面中那樣,沒法預知 JavaScript 是否在<p>標籤中添加內容。所以,瀏覽器停下來,運行此 JavaScript 代碼,而後再繼續解析、翻譯頁面。一樣的事情發生在使用 src 屬性加載 JavaScript 的過程當中。瀏覽器必須首先下載外部文件的代碼,這要佔用一些時間,而後解析並運行此代碼。此過程當中,頁面解析和用戶交互是被徹底阻塞的。前端

由於腳本阻塞其餘頁面資源的下載過程,因此推薦的辦法是:將全部<script>標籤放在儘量接近<body> 標籤底部的位置,儘可能減小對整個頁面下載的影響。例如: java

<html>
  <head>
    <title>Script Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css"> 
  </head>
  
  <body>
    <p>Hello world!</p>
    <-- Example of recommended script positioning --> 
      <script type="text/javascript" src="file1.js"></script> 
      <script type="text/javascript" src="file2.js"></script> 
      <script type="text/javascript" src="file3.js"></script>
  </body> 
</html>

此代碼展現了所推薦的<script>標籤在 HTML 文件中的位置。儘管腳本下載之間互相阻塞,但頁面已經下載完成而且顯示在用戶面前了,進入頁面的速度不會顯得太慢。這就是上面提到的將JS放到底部。 git

另外，Yahoo! 爲他的「Yahoo! 用戶接口(Yahoo! User Interface,YUI)」庫建立一個「聯合句柄」,這是經過他們的「內容投遞網絡(Content Delivery Network,CDN)」實現的。任何一個網站可使用一個「聯合句柄」URL 指出包含 YUI 文件包中的哪些文件。例如,下面的 URL 包含兩個文件: github

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"></script>

此 URL 調用 2.7.0 版本的 yahoo-min.js 和 event-min.js 文件。這些文件在服務器上是兩個分離的文件,可是當服務器收到此 URL 請求時,兩個文件將被合併在一塊兒返回給客戶端。經過這種方法,就再也不須要兩個 <script>標籤(每一個標籤加載一個文件),一個<script>標籤就能夠加載他們。這是在HTML頁面包含多個外部 Javascript的最佳方法。 shell

Noblocking Scripts 非阻塞腳本 api

上述是頁面初始狀態包含多個Javascript腳本加載的最佳方法。Javascript傾向於阻塞瀏覽器某些處理過程，如http請求和界面刷新，這是開發者面臨的最顯著性能問題。保持Javascript文件短小，並限制http請求的數量，只是建立反應迅速的網頁應用第一步。瀏覽器

但諸如大型網頁有大量的Js代碼，保持源碼短小並不老是一種最佳選擇。So，非阻塞腳本應運而生，咱們須要的是向頁面中逐步添加javascript，某種程度上而言不會阻塞瀏覽器。

而非阻塞腳本的關鍵在於，等頁面完成加載以後，再加載Javascript源碼，這意味着在window的load事件發出以後開始下載代碼。

相關解釋：

window 的load事件只會在頁面載入完畢後觸發一次且僅一次。

window.onload=function(){}必須等待網頁中全部的內容加載完畢後 ( 包括元素的全部關聯文件，例如圖片 ) 才能執行，即Javascript此時才能夠訪問頁面中的任何元素。

以下述幾種方法：

Deferred Scripts 延期腳本

Html4爲<script>標籤訂義了一個擴展屬性：defer。

這個defer屬性指明元素中所包含的腳本不打算修改DOM，所以代碼能夠稍後執行。defer屬性只被Internet Explorer 4+和Firefox 3.5+支持，它不是一個理想的跨瀏覽器解決方案。在其餘瀏覽器上，defer屬性將被忽略。因此，<script>標籤會按照正常默認方式處理，便是會形成阻塞。若是獲得各個主流瀏覽器的支持，這還是一種有效的解決方式。

<script type="text/javascript" src="file1.js" defer></script>

一個帶有defer屬性的<script>標籤能夠放置在文檔的任何位置，它會在被解析時啓動下載，直到DOM加載完成（在 onload事件句柄被調用以前）。當一個defer的Javascript文件被下載時，它不會阻塞瀏覽器的其餘處理過程，因此這些文件能夠與其餘資源一塊兒並行下載。

可使用下述代碼測試瀏覽器是否支持defer屬性：

<html>
  <head>
    <title>Script Defer Example</title>
  </head> 

  <body>
    <script defer> alert("defer");</script> 
    <script> alert("script"); </script> 
    <script> window.onload = function(){ alert("load");}; </script>
  </body> 
</html>

若是瀏覽器不支持defer，那麼彈出的對話框的順序是「defer」，「script」，「load」。

若是瀏覽器支持defer，那麼彈出的對話框的順序是「script」，「defer」，「load」。

Dynamic Script Elements 動態腳本元素

DOM容許咱們使用Javascript動態建立HTML的幾乎全部文檔內容，一個新的<script>元素能夠很是容易的經過標準DOM建立：

var script = document.createElement ("script");
script.type = "text/javascript";
script.src = "file1.js"; 
document.body.appendChild(script);

新的<script>元素加載file1.js源文件。此文件當元素添加到頁面後馬上開始下載。此技術的重點在於：不管在何處啓動下載，文件的下載和運行都不會阻塞其餘頁面處理過程。

當文件使用動態腳本節點下載時，返回的代碼一般當即執行（除了Firefox和Opera，它們將等待此前的全部動態腳本節點執行完畢）。

大多數狀況下，咱們但願調用一個函數就能夠實現Javascript文件的動態下載。下面的函數封裝實現了標準實現和IE實現：

function loadScript(url, callback){
    var script = document.createElement ("script") ;
　  script.type = "text/javascript";
     
    if (script.readyState){ //IE
       script.onreadystatechange = function(){
         if (script.readyState == "loaded" || script.readyState == "complete"){
           script.onreadystatechange = null;
           callback(); 
          }
       };
     } 
     else { //Others
       script.onload = function(){ callback();
     }; 
   }
   script.src = url;
   document.getElementsByTagName("head")[0].appendChild(script); 
 }

loadScript("file1.js", function(){  //調用
    alert("File is loaded!"); 
});

此函數接受兩個參數：Javascript文件的Url和一個當Javascript接收完成時觸發的回調函數。屬性檢查用於決定監視哪一種事件。最後一步src屬性，並將javascript文件添加到head。

動態腳本加載是非阻塞Javascript下載中最經常使用的模式，由於它能夠跨瀏覽器，並且簡單易用。

XMLHttpRequest Script Injection XHR腳本注入

另外一個以非阻塞方式得到腳本的方法是使用XMLHttpRequest(XHR)對象將腳本注入到頁面中。此技術首先建立一個XHR對象，而後下載 Javascript文件，接着用一個動態<script>元素將Javascript代碼注入頁面。看demo：

var xhr = new XMLHttpRequest(); 
xhr.open("get", "file1.js", true); 
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ // 檢查http狀態碼
        var script = document.createElement("script"); 
        script.type = "text/javascript";
        script.text = xhr.responseText;
        document.body.appendChild(script);
      } 
   }
}; 
xhr.send(null);

此代碼向服務器發送一個獲取file1.js的文件get請求。onreadystatechange事件處理函數檢查readyState是否是 4，而後檢查http狀態碼是否是有效（200表示肯定客戶端請求已成功，2xx表示有效迴應，304表示一個緩存響應）。若是收到一個有效響應，那麼就建立一個新的<script>元素，將它的文本屬性設置爲從服務器接收到的responseText字符串。這樣作實際上會建立一個帶有內聯代碼的<script>元素，一旦新的<script>元素被添加到文檔，代碼將被執行，並準備使用。

此方法的優勢是兼容性佳，且你能夠下載不當即執行的Javascript代碼。因爲代碼返回在<script>標籤以外，它下載後不會自動執行，這使得你能夠推遲執行。

此方法的肯定是受到瀏覽器同源限制，Javascript文件必須與頁面放置在同一個域內，不能從CDN(內容分發網絡Content Delivery Network)下載。正由於這個緣由，大型網頁一般不採用XHR腳本注入技術。

Recommended Noblocking Pattern 推薦的非阻塞模式

推薦的向頁面加載大量Javascript的方法分爲兩個步驟：

第一步，包含動態加載Javascript所需的代碼，而後加載頁面初始化所需的除了Javascript以外的部分。這部分代碼儘可能小，可能只包含loadScript()函數，它的下載和運行很是迅速，不會對頁面形成很大幹擾。
第二步，當初始代碼準備好以後，用它來加載其他的Javascript。

例如：

<script type="text/javascript" src="loader.js">
</script> <script type="text/javascript">
loadScript("the-rest.js", function(){ 
　　Application.init();
}); 

</script>

將此代碼放置在body的關閉標籤</body>以前。這樣作的好處是，首先，這樣確保Javascript運行不會影響其餘頁面的其他部分顯示。其次，當第二部分Javascript文件完成下載，全部應用程序所必須的DOM已經建立完畢，並作好被訪問的準備，避免使用額外的事件處理（如window.onload）來得知頁面是否已經準備好了。

另外一個選擇是直接將loadScript()函數嵌入在頁面中，這能夠減小一個http請求的開銷。例如：

<script type="text/javascript"> 
  function loadScript(url, callback){
    var script = document.createElement ("script");
　  script.type = "text/javascript";
   
    if (script.readyState){ //IE script.onreadystatechange = function(){
      if (script.readyState == "loaded" || script.readyState == "complete"){
        script.onreadystatechange = null; 
        callback();
      } 
    };
  } else { //Others 
   script.onload = function(){
   　　callback(); 
   };
  }
  script.src = url; 
  document.getElementsByTagName("head")[0].appendChild(script);
}

loadScript("the-rest.js", function(){
　　Application.init(); 
});
</script>

一旦頁面初始化代碼下載完成，還可使用loadScript()函數加載頁面所需的額外功能函數。

介紹一個通用的工具，Yahoo! Search的Ryan Grove建立了LazyLoad庫（參見：http://github.com/rgrove/lazyload/ ）。LazyLoad是一個強大的loadScript()函數。LazyLoad精縮以後只有大約1.5KB。用法舉例以下：

<script type="text/javascript" src="lazyload-min.js"></script> 
<script type="text/javascript">
LazyLoad.js("the-rest.js", function(){ 
Application.init();
}); 
</script>

Summary 總結

將全部<script>標籤放置在頁面底部，緊靠關閉標籤</body>的上方。此方法能夠保證頁面在腳本運行以前完成解析。
將腳本成組打包。頁面的<script>標籤越少，頁面的加載速度就越快，響應也更迅速。不論外部腳本文件仍是內聯代碼都是如此。
有幾種方法可使用非阻塞方式下載Javascript：
- 爲<script>標籤添加defer屬性
- 動態建立<script>元素，用它下載並執行代碼
- 用XHR對象下載代碼，並注入到頁面

經過上述策略，能夠極大提升那些使用Javascript代碼的網友應用的實際性能。

參考書籍《高性能Javascript》。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。