JavaScript的性能優化：加載和執行

jopen 11年前發布 | 35K 次閱讀 JavaScript開發 JavaScript

js最大的問題是：無論當前JavaScript代碼是內嵌還是在外鏈文件中，頁面的下載和渲染都必須停下來等待腳本執行完成。JavaScript執行過程耗時越久，瀏覽器等待響應用戶輸入的時間就越長。瀏覽器在下載和執行腳本時出現阻塞.

解決辦法:

一:腳本的位置:

由于腳本會阻塞頁面其他資源的下載，因此推薦將所有<script>標簽盡可能放到<body>標簽的底部，以盡量減少對整個頁面下載的影響。

例如: 

<html>  
<head>  
    <title>Source Example</title>  
    <link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
<body>  
    <p>Hello world!</p>  
    <!-- Example of efficient script positioning -->  
    <script type="text/javascript" src="script1.js"></script>  
    <script type="text/javascript" src="script2.js"></script>  
    <script type="text/javascript" src="script3.js"></script>  
</body>  
</html>
二: 組織腳本

由于每個<script>標簽初始下載時都會阻塞頁面渲染，所以減少頁面包含的<script>標簽數量有助于改善這一情況。這不僅針對外鏈腳本，內嵌腳本的數量同樣也要限制。瀏覽器在解析 HTML 頁面的過程中每遇到一個<script>標簽，都會因執行腳本而導致一定的延時，因此最小化延遲時間將會明顯改善頁面的總體性能。

這個問題在處理外鏈 JavaScript 文件時略有不同。考慮到 HTTP 請求會帶來額外的性能開銷，因此下載單個 100Kb 的文件將比下載 5 個 20Kb 的文件更快。也就是說，減少頁面中外鏈腳本的數量將會改善性能。

所以盡量合并和壓縮js

三：延遲加載腳本

HTML 4 為<script>標簽定義了一個擴展屬性：defer。Defer 屬性指明本元素所含的腳本不會修改 DOM，因此代碼能安全地延遲執行

用法： 

<script type="text/javascript" src="script1.js" defer></script>
HTML 5 為<script> 標簽定義了一個新的擴展屬性：async 。它的作用和 defer  一樣，能夠異步地加載和執行腳本，不因為加載腳本而阻塞頁面的加載。但是有一點需要注意，在有 async  的情況下，JavaScript 腳本一旦下載好了就會執行，所以很有可能不是按照原本的順序來執行的。如果 JavaScript 腳本前后有依賴性，使用 async  就很有可能出現錯誤。

用法： 

<script type="text/javascript" src="script1.js" async></script>

四：動態腳本元素

文檔對象模型（DOM）允許您使用 JavaScript 動態創建 HTML 的幾乎全部文檔內容。<script>元素與頁面其他元素一樣，可以非常容易地通過標準 DOM 函數創建：

清單 6 通過標準 DOM 函數創建<script>元素

Js代碼 
  1. var script = document.createElement ("script");  
  2.    script.type = "text/javascript";  
  3.    script.src = "script1.js";  
  4.    document.getElementsByTagName("head")[0].appendChild(script);  

新的<script>元素加載 script1.js 源文件。此文件當元素添加到頁面之后立刻開始下載。此技術的重點在于：無論在何處啟動下載，文件的下載和運行都不會阻塞其他頁面處理過程。您甚至可以將這些代碼放在<head>部分而不會對其余部分的頁面代碼造成影響（除了用于下載文件的 HTTP 連接）。

當文件使用動態腳本節點下載時，返回的代碼通常立即執行（除了 Firefox 和 Opera，他們將等待此前的所有動態腳本節點執行完畢）。當腳本是“自運行”類型時，這一機制運行正常，但是如果腳本只包含供頁面其他腳本調用調用的接口，則會帶來問題。這種情況下，您需要跟蹤腳本下載完成并是否準備妥善。可以使用動態 <script> 節點發出事件得到相關信息。

Firefox、Opera, Chorme 和 Safari 3+會在<script>節點接收完成之后發出一個 onload 事件。您可以監聽這一事件，以得到腳本準備好的通知：

清單 7 通過監聽 onload 事件加載 JavaScript 腳本

Js代碼 
  1. var script = document.createElement ("script")  
  2. script.type = "text/javascript";  
  3. //Firefox, Opera, Chrome, Safari 3+  
  4. script.onload = function(){  
  5.     alert("Script loaded!");  
  6. };  
  7. script.src = "script1.js";  
  8. document.getElementsByTagName("head")[0].appendChild(script);  

 Internet Explorer 支持另一種實現方式，它發出一個 readystatechange 事件。<script>元素有一個readyState 屬性，它的值隨著下載外部文件的過程而改變。readyState 有五種取值：

  • “uninitialized”：默認狀態
  • “loading”：下載開始
  • “loaded”：下載完成
  • “interactive”：下載完成但尚不可用
  • “complete”：所有數據已經準備好

微軟文檔上說，在<script>元素的生命周期中，readyState 的這些取值不一定全部出現，但并沒有指出哪些取值總會被用到。實踐中，我們最感興趣的是“loaded”和“complete”狀態。Internet Explorer 對這兩個 readyState 值所表示的最終狀態并不一致，有時<script>元素會得到“loader”卻從不出現“complete”，但另外一些情況下出現“complete”而用不到“loaded”。最安全的辦法就是在readystatechange 事件中檢查這兩種狀態，并且當其中一種狀態出現時，刪除readystatechange事件句柄（保證事件不會被處理兩次）：

清單 8 通過檢查readyState狀態加載JavaScript腳本

Js代碼 
  1. var script = document.createElement("script")  
  2. script.type = "text/javascript";  
  3. //Internet Explorer  
  4. script.onreadystatechange = function(){  
  5.      if (script.readyState == "loaded" || script.readyState == "complete"){  
  6.            script.onreadystatechange = null;  
  7.            alert("Script loaded.");  
  8.      }  
  9. };  
  10. script.src = "script1.js";  
  11. document.getElementsByTagName("head")[0].appendChild(script);  

大多數情況下，您希望調用一個函數就可以實現JavaScript文件的動態加載。下面的函數封裝了標準實現和 IE 實現所需的功能：

清單 9 通過函數進行封裝

Js代碼 
  1. function loadScript(url, callback){  
  2.     var script = document.createElement ("script")  
  3.     script.type = "text/javascript";  
  4.     if (script.readyState){ //IE  
  5.         script.onreadystatechange = function(){  
  6.             if (script.readyState == "loaded" || script.readyState == "complete"){  
  7.                 script.onreadystatechange = null;  
  8.                 callback();  
  9.             }  
  10.         };  
  11.     } else { //Others  
  12.         script.onload = function(){  
  13.             callback();  
  14.         };  
  15.     }  
  16.     script.src = url;  
  17.     document.getElementsByTagName("head")[0].appendChild(script);  
  18. }  

此函數接收兩個參數：JavaScript 文件的 URL，和一個當 JavaScript 接收完成時觸發的回調函數。屬性檢查用于決定監視哪種事件。最后一步，設置 src 屬性，并將<script>元素添加至頁面。此loadScript() 函數使用方法如下：

清單 10 loadScript()函數使用方法

Js代碼 
  1. loadScript("script1.js", function(){  
  2.     alert("File is loaded!");  
  3. });  

您可以在頁面中動態加載很多 JavaScript 文件，但要注意，瀏覽器不保證文件加載的順序。所有主流瀏覽器之中，只有 Firefox 和 Opera 保證腳本按照您指定的順序執行。其他瀏覽器將按照服務器返回它們的次序下載并運行不同的代碼文件。您可以將下載操作串聯在一起以保證他們的次序，如下：

清單 11 通過 loadScript()函數加載多個JavaScript腳本

Js代碼 
  1. loadScript("script1.js", function(){  
  2.     loadScript("script2.js", function(){  
  3.         loadScript("script3.js", function(){  
  4.             alert("All files are loaded!");  
  5.         });  
  6.     });  
  7. });  

此代碼等待 script1.js 可用之后才開始加載 script2.js，等 script2.js 可用之后才開始加載 script3.js。雖然此方法可行，但如果要下載和執行的文件很多，還是有些麻煩。如果多個文件的次序十分重要，更好的辦法是將這些文件按照正確的次序連接成一個文件。獨立文件可以一次性下載所有代碼（由于這是異步進行的，使用一個大文件并沒有什么損失）。

動態腳本加載是非阻塞 JavaScript 下載中最常用的模式，因為它可以跨瀏覽器，而且簡單易用。

使用XMLHttpRequest(XHR)對象

此技術首先創建一個 XHR 對象，然后下載 JavaScript 文件，接著用一個動態 <script> 元素將 JavaScript 代碼注入頁面。清單 12 是一個簡單的例子：

清單 12 通過 XHR 對象加載 JavaScript 腳本

Js代碼 
  1. var xhr = new XMLHttpRequest();  
  2. xhr.open("get", "script1.js", true);  
  3. xhr.onreadystatechange = function(){  
  4.     if (xhr.readyState == 4){  
  5.         if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){  
  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);  

此代碼向服務器發送一個獲取 script1.js 文件的 GET 請求。onreadystatechange 事件處理函數檢查readyState 是不是 4，然后檢查 HTTP 狀態碼是不是有效（2XX 表示有效的回應，304 表示一個緩存響應）。如果收到了一個有效的響應，那么就創建一個新的<script>元素，將它的文本屬性設置為從服務器接收到的 responseText 字符串。這樣做實際上會創建一個帶有內聯代碼的<script>元素。一旦新<script>元素被添加到文檔，代碼將被執行，并準備使用。 

這種方法的主要優點是，您可以下載不立即執行的 JavaScript 代碼。由于代碼返回在<script>標簽之外（換句話說不受<script>標簽約束），它下載后不會自動執行，這使得您可以推遲執行，直到一切都準備好了。另一個優點是，同樣的代碼在所有現代瀏覽器中都不會引發異常。 

此方法最主要的限制是：JavaScript 文件必須與頁面放置在同一個域內，不能從 CDN 下載（CDN 指”內容投遞網絡（Content Delivery Network）”，所以大型網頁通常不采用 XHR 腳本注入技術。 

總結

減少 JavaScript 對性能的影響有以下幾種方法：

  • 將所有的<script>標簽放到頁面底部，也就是</body>閉合標簽之前，這能確保在腳本執行前頁面已經完成了渲染。
  • 盡可能地合并腳本。頁面中的<script>標簽越少，加載也就越快，響應也越迅速。無論是外鏈腳本還是內嵌腳本都是如此。
  • 采用無阻塞下載 JavaScript 腳本的方法：
  • 使用<script>標簽的 defer 屬性（僅適用于 IE 和 Firefox 3.5 以上版本）；
  • 使用動態創建的<script>元素來下載并執行代碼；
  • 使用 XHR 對象下載 JavaScript 代碼并注入頁面中。

通過以上策略，可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 網站和應用的實際性能。 


 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！