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

時間 2019-11-18

原文原文鏈接

概覽

不管當前 JavaScript 代碼是內嵌仍是在外鏈文件中，頁面的下載和渲染都必須停下來等待腳本執行完成。JavaScript 執行過程耗時越久，瀏覽器等待響應用戶輸入的時間就越長。瀏覽器在下載和執行腳本時出現阻塞的緣由在於，腳本可能會改變頁面或 JavaScript 的命名空間，它們對後面頁面內容形成影響。一個典型的例子就是在頁面中使用document.write()。例如清單 1javascript

清單 1 JavaScript 代碼內嵌示例

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

當瀏覽器遇到<script>標籤時，當前 HTML 頁面無從獲知 JavaScript 是否會向<p> 標籤添加內容，或引入其餘元素，或甚至移除該標籤。所以，這時瀏覽器會中止處理頁面，先執行 JavaScript代碼，而後再繼續解析和渲染頁面。一樣的狀況也發生在使用 src 屬性加載 JavaScript的過程當中，瀏覽器必須先花時間下載外鏈文件中的代碼，而後解析並執行它。在這個過程當中，頁面渲染和用戶交互徹底被阻塞了。css

回頁首html

腳本位置

HTML 4 規範指出 <script> 標籤能夠放在 HTML 文檔的<head>或<body>中，並容許出現屢次。Web 開發人員通常習慣在 <head> 中加載外鏈的 JavaScript，接着用 <link> 標籤用來加載外鏈的 CSS 文件或者其餘頁面信息。例如清單 2java

清單 2 低效率腳本位置示例

<html>
<head>
    <title>Source Example</title>
    <script type="text/javascript" src="script1.js"></script>
    <script type="text/javascript" src="script2.js"></script>
    <script type="text/javascript" src="script3.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>Hello world!</p>
</body>
</html>

然而這種常規的作法卻隱藏着嚴重的性能問題。在清單 2 的示例中，當瀏覽器解析到 <script> 標籤（第 4 行）時，瀏覽器會中止解析其後的內容，而優先下載腳本文件，並執行其中的代碼，這意味着，其後的 styles.css 樣式文件和<body>標籤都沒法被加載，因爲<body>標籤沒法被加載，那麼頁面天然就沒法渲染了。所以在該 JavaScript 代碼徹底執行完以前，頁面都是一片空白。圖 1 描述了頁面加載過程當中腳本和樣式文件的下載過程。web

圖 1 JavaScript 文件的加載和執行阻塞其餘文件的下載

咱們能夠發現一個有趣的現象：第一個 JavaScript 文件開始下載，與此同時阻塞了頁面其餘文件的下載。此外，從 script1.js 下載完成到 script2.js 開始下載前存在一個延時，這段時間正好是 script1.js 文件的執行過程。每一個文件必須等到前一個文件下載並執行完成纔會開始下載。在這些文件逐個下載過程當中，用戶看到的是一片空白的頁面。瀏覽器

從 IE 八、Firefox 3.五、Safari 4 和 Chrome 2 開始都容許並行下載 JavaScript 文件。這是個好消息，由於<script>標籤在下載外部資源時不會阻塞其餘<script>標籤。遺憾的是，JavaScript 下載過程仍然會阻塞其餘資源的下載，好比樣式文件和圖片。儘管腳本的下載過程不會互相影響，但頁面仍然必須等待全部 JavaScript 代碼下載並執行完成才能繼續。所以，儘管最新的瀏覽器經過容許並行下載提升了性能，但問題還沒有徹底解決，腳本阻塞仍然是一個問題。緩存

因爲腳本會阻塞頁面其餘資源的下載，所以推薦將全部<script>標籤儘量放到<body>標籤的底部，以儘可能減小對整個頁面下載的影響。例如清單 3安全

清單 3 推薦的代碼放置位置示例

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

這段代碼展現了在 HTML 文檔中放置<script>標籤的推薦位置。儘管腳本下載會阻塞另外一個腳本，可是頁面的大部份內容都已經下載完成並顯示給了用戶，所以頁面下載不會顯得太慢。這是優化 JavaScript 的首要規則：將腳本放在底部。服務器

回頁首網絡

組織腳本

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

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

一般一個大型網站或應用須要依賴數個 JavaScript 文件。您能夠把多個文件合併成一個，這樣只須要引用一個<script>標籤，就能夠減小性能消耗。文件合併的工做可經過離線的打包工具或者一些實時的在線服務來實現。

須要特別提醒的是，把一段內嵌腳本放在引用外鏈樣式表的<link>以後會致使頁面阻塞去等待樣式表的下載。這樣作是爲了確保內嵌腳本在執行時能得到最精確的樣式信息。所以，建議不要把內嵌腳本緊跟在<link>標籤後面。

回頁首

無阻塞的腳本

減小 JavaScript 文件大小並限制 HTTP 請求數在功能豐富的 Web 應用或大型網站上並不老是可行。Web 應用的功能越豐富，所須要的 JavaScript 代碼就越多，儘管下載單個較大的 JavaScript 文件只產生一次 HTTP 請求，卻會鎖死瀏覽器的一大段時間。爲避免這種狀況，須要經過一些特定的技術向頁面中逐步加載 JavaScript 文件，這樣作在某種程度上來講不會阻塞瀏覽器。

無阻塞腳本的祕訣在於，在頁面加載完成後才加載 JavaScript 代碼。這就意味着在 window 對象的 onload事件觸發後再下載腳本。有多種方式能夠實現這一效果。

延遲加載腳本

HTML 4 爲<script>標籤訂義了一個擴展屬性：defer。Defer 屬性指明本元素所含的腳本不會修改 DOM，所以代碼能安全地延遲執行。defer 屬性只被 IE 4 和 Firefox 3.5 更高版本的瀏覽器所支持，因此它不是一個理想的跨瀏覽器解決方案。在其餘瀏覽器中，defer 屬性會被直接忽略，所以<script>標籤會以默認的方式處理，也就是說會形成阻塞。然而，若是您的目標瀏覽器支持的話，這仍然是個有用的解決方案。清單 4 是一個例子

清單 4 defer 屬性使用方法示例

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

帶有 defer 屬性的<script>標籤能夠放置在文檔的任何位置。對應的 JavaScript 文件將在頁面解析到<script>標籤時開始下載，但不會執行，直到 DOM 加載完成，即onload事件觸發前纔會被執行。當一個帶有 defer 屬性的 JavaScript 文件下載時，它不會阻塞瀏覽器的其餘進程，所以這類文件能夠與其餘資源文件一塊兒並行下載。

任何帶有 defer 屬性的<script>元素在 DOM 完成加載以前都不會被執行，不管內嵌或者是外鏈腳本都是如此。清單 5 的例子展現了defer屬性如何影響腳本行爲：

清單 5 defer 屬性對腳本行爲的影響

<html>
<head>
    <title>Script Defer Example</title>
</head>
<body>
    <script type="text/javascript" defer>
        alert("defer");
    </script>
    <script type="text/javascript">
        alert("script");
    </script>
    <script type="text/javascript">
        window.onload = function(){
            alert("load");
        };
    </script>
</body>
</html>

這段代碼在頁面處理過程當中彈出三次對話框。不支持 defer 屬性的瀏覽器的彈出順序是：「defer」、「script」、「load」。而在支持 defer 屬性的瀏覽器上，彈出的順序則是：「script」、「defer」、「load」。請注意，帶有 defer 屬性的<script>元素不是跟在第二個後面執行，而是在 onload 事件被觸發前被調用。

若是您的目標瀏覽器只包括 Internet Explorer 和 Firefox 3.5，那麼 defer 腳本確實有用。若是您須要支持跨領域的多種瀏覽器，那麼還有更一致的實現方式。

HTML 5 爲<script>標籤訂義了一個新的擴展屬性：async。它的做用和 defer 同樣，可以異步地加載和執行腳本，不由於加載腳本而阻塞頁面的加載。可是有一點須要注意，在有 async 的狀況下，JavaScript 腳本一旦下載好了就會執行，因此頗有可能不是按照本來的順序來執行的。若是 JavaScript 腳本先後有依賴性，使用 async 就頗有可能出現錯誤。

動態腳本元素

文檔對象模型（DOM）容許您使用 JavaScript 動態建立 HTML 的幾乎所有文檔內容。<script>元素與頁面其餘元素同樣，能夠很是容易地經過標準 DOM 函數建立：

清單 6 經過標準 DOM 函數建立<script>元素

var script = document.createElement ("script");
   script.type = "text/javascript";
   script.src = "script1.js";
   document.getElementsByTagName("head")[0].appendChild(script);

新的<script>元素加載 script1.js 源文件。此文件當元素添加到頁面以後馬上開始下載。此技術的重點在於：不管在何處啓動下載，文件的下載和運行都不會阻塞其餘頁面處理過程。您甚至能夠將這些代碼放在<head>部分而不會對其他部分的頁面代碼形成影響（除了用於下載文件的 HTTP 鏈接）。

當文件使用動態腳本節點下載時，返回的代碼一般當即執行（除了 Firefox 和 Opera，他們將等待此前的全部動態腳本節點執行完畢）。當腳本是「自運行」類型時，這一機制運行正常，可是若是腳本只包含供頁面其餘腳本調用調用的接口，則會帶來問題。這種狀況下，您須要跟蹤腳本下載完成並是否準備妥善。可使用動態 <script> 節點發出事件獲得相關信息。

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

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

var script = document.createElement ("script")
script.type = "text/javascript";

//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
    alert("Script loaded!");
};

script.src = "script1.js";
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 腳本

var script = document.createElement("script")
script.type = "text/javascript";

//Internet Explorer
script.onreadystatechange = function(){
     if (script.readyState == "loaded" || script.readyState == "complete"){
           script.onreadystatechange = null;
           alert("Script loaded.");
     }
};

script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);

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

清單 9 經過函數進行封裝

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);
}

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

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

loadScript("script1.js", function(){
    alert("File is loaded!");
});

您能夠在頁面中動態加載不少 JavaScript 文件，但要注意，瀏覽器不保證文件加載的順序。全部主流瀏覽器之中，只有 Firefox 和 Opera 保證腳本按照您指定的順序執行。其餘瀏覽器將按照服務器返回它們的次序下載並運行不一樣的代碼文件。您能夠將下載操做串聯在一塊兒以保證他們的次序，以下：

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

loadScript("script1.js", function(){
    loadScript("script2.js", function(){
        loadScript("script3.js", function(){
            alert("All files are loaded!");
        });
    });
});

此代碼等待 script1.js 可用以後纔開始加載 script2.js，等 script2.js 可用以後纔開始加載 script3.js。雖然此方法可行，但若是要下載和執行的文件不少，仍是有些麻煩。若是多個文件的次序十分重要，更好的辦法是將這些文件按照正確的次序鏈接成一個文件。獨立文件能夠一次性下載全部代碼（因爲這是異步進行的，使用一個大文件並無什麼損失）。

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

使用 XMLHttpRequest(XHR)對象

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

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

var xhr = new XMLHttpRequest();
xhr.open("get", "script1.js", true);
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement ("script");
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);
        }
    }
};
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 腳本注入技術。