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

時間 2019-11-19

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

原文原文鏈接

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

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

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

 1 <html>
 2   <head>
 3     <title>Script Example</title>
 4   </head> 
 5   
 6   <body>
 7      <p>
 8         <script type="text/javascript">
 9  document.write("The date is " + (new Date()).toDateString()); 10         </script> 
11      </p>
12   </body> 
13 </html>

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

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

 1 <html>
 2   <head>
 3     <title>Script Example</title>
 4     <link rel="stylesheet" type="text/css" href="styles.css"> 
 5   </head>
 6   
 7   <body>
 8     <p>Hello world!</p>
 9     <-- Example of recommended script positioning --> 
10       <script type="text/javascript" src="file1.js"></script> 
11       <script type="text/javascript" src="file2.js"></script> 
12       <script type="text/javascript" src="file3.js"></script>
13   </body> 
14 </html>

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

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

1 　　<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的最佳方法。github

　　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屬性：

 1 <html>
 2   <head>
 3     <title>Script Defer Example</title>
 4   </head> 
 5 
 6   <body>
 7     <script defer> alert("defer");</script> 
 8     <script> alert("script"); </script> 
 9     <script> window.onload = function(){ alert("load");}; </script>
10   </body> 
11 </html>

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

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

根據你們評論的反饋，HTML5新增了一個async屬性。在上述的基礎上，對比一下defer與async的異同：

相同之處：

加載文件時不阻塞頁面渲染
使用這兩個屬性的腳本中不能調用document.write方法
有腳本的onload的事件回調

區別點：

html的版本 html4.0中定義了defer；html5.0中定義了async
執行時刻

每個async屬性的腳本都在它下載結束以後馬上執行，同時會在window的load事件以前執行。因此就有可能出現腳本執行順序被打亂的狀況；每個defer屬性的腳本都是在頁面解析完畢以後，按照本來的順序執行，同時會在document的　　　DOMContentLoaded以前執行。

瀏覽器

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	(Supported)	(Supported)	(Supported)
`async`attribute	(Supported)	3.6 (1.9.2)	10	–	(Supported)
`defer`attribute	(Supported)	3.5 (1.9.1)	4	–	(Supported)

　　Dynamic Script Elements 動態腳本元素

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

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

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

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

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

 1  function loadScript(url, callback){  2  var script = document.createElement ("script") ;  3 　 script.type = "text/javascript";  4      
 5  if (script.readyState){ //IE  6  script.onreadystatechange = function(){  7  if (script.readyState == "loaded" || script.readyState == "complete"){  8  script.onreadystatechange = null;  9  callback(); 10  } 11  }; 12  } 13  else { //Others 14  script.onload = function(){ callback(); 15  }; 16  } 17  script.src = url; 18  document.getElementsByTagName("head")[0].appendChild(script); 19  } 20 
21 loadScript("file1.js", function(){ //調用 22  alert("File is loaded!"); 23 });

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

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

　　XMLHttpRequest Script Injection XHR腳本注入

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

 1 var xhr = new XMLHttpRequest();  2 xhr.open("get", "file1.js", true);  3 xhr.onreadystatechange = function(){  4  if (xhr.readyState == 4){  5       if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ // 檢查http狀態碼  6  var script = document.createElement("script");  7  script.type = "text/javascript";  8  script.text = xhr.responseText;  9         document.body.appendChild(script); 10  } 11  } 12 }; 13 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。

例如：

1 <script type="text/javascript" src="loader.js">
2 </script> <script type="text/javascript">
3 loadScript("the-rest.js", function(){ 4 　　Application.init(); 5 }); 6 
7 </script>

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

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

 1 <script type="text/javascript"> 
 2   function loadScript(url, callback){  3     var script = document.createElement ("script");  4 　 script.type = "text/javascript";  5    
 6     if (script.readyState){ //IE script.onreadystatechange = function(){
 7       if (script.readyState == "loaded" || script.readyState == "complete"){  8  script.onreadystatechange = null;  9  callback(); 10  } 11  }; 12  } else { //Others 
13  script.onload = function(){ 14  　　callback(); 15  }; 16  } 17  script.src = url; 18  document.getElementsByTagName("head")[0].appendChild(script); 19 } 20 
21 loadScript("the-rest.js", function(){ 22 　　Application.init(); 23 }); 24 </script>

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

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

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

　　Summary 總結

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

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

參考書籍《高性能Javascript》。

高性能Javascript專題，第二篇：高性能Javascript--高效的數據訪問。