首頁 > 文章 > web前端 > 如何加快JavaScript的載入與執行

如何加快JavaScript的載入與執行

黄舟原創: 2016-12-20 15:40:111055瀏覽

JS 有個很無言的阻塞特性，就是當瀏覽器在執行JS 程式碼時，不能同時做其他任何事情，無論其程式碼是內嵌的還是外部的。

瀏覽器在碰到一個引入外部JS 文件的<script>標籤時會停下所有工作來下載並解析執行它，在這個過程中，頁面渲染和用戶交互完全被阻塞了，為了避免頁面加載時的停頓甚至空白頁的出現，JS 腳本應盡量放置在頁面底部，這點很重要：</script>

<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/">
</head>
<body>
<p>页面的内容。。。</p>
<!-- 推荐的位置，页面底部： -->
<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>標籤的出現次數，這同時也是考慮到HTTP 請求會帶來額外的效能開銷，也就是說應減少頁面中外鏈腳本的數量。 </script>

你可以手動合併你的多個JS 文件，也可採用類似Yahoo! combo handler 這樣的實時在線服務來實現，例如下面的這個<script>標籤實際上便載入了3個JS 文件：</script>

<html>  
<head>  
<title>无标题文档</title>  
<link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/">  
</head>  
<body>  
   
<p>页面的内容。。。</p>  
   
<!-- 推荐的位置，页面底部： --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>  
</body>  
</html>

為了阻塞狀況，這裡提供了幾個實作並行下載JS 腳本的方案。

1. 延遲的腳本

HTML4 為<script>標籤定義了一個defer 屬性，它能讓這段程式碼延遲執行，然而該屬性只有IE4+ 和Firefox 3.5+ 支援。宣告了defer 屬性的<script>會在DOM載入完成，window.onload 事件觸發前被解析執行：</script>

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

2. 動態腳本元素

這是最通用的解決方案，透過DOM 動態地建立<script>元素並插入到文件中，文件在該元素被添加到頁面時開始下載，這樣無論在何時啟動下載，文件的下載和執行過程不會阻塞頁面其他進程。 </script>

不過要注意使用這種方式載入的程式碼會立刻執行，這樣需清楚的了解各文件的作用以及合理的執行順序，此時跟踪並確保腳本下載完成並準備就緒是很有必要的，非IE瀏覽器會在<script>元素接收完成時觸發一個load 事件，而IE 下則會觸發一個readystatechange 事件並透過readyState 屬性加以判斷便可。以下是相容地動態載入一個JS 腳本的函數：</script>

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

你可以將這個函數儲存至一個load_script.js 文件，然後用該函數來載入其他的腳本，當要載入多個腳本時，為了確保正確的載入順序，可以將load_script() 的執行串聯起來，最後如前面說到的放至頁面的底部，這便是比較完美的解決方案了：

<script type="text/javascript" src="load_script.js"></script>  
<script type="text/javascript">
load_script(&#39;file1.js&#39;, function() {  
    load_script(&#39;file2.js&#39;, function() {  
        load_script(&#39;file3.js&#39;, function() {  
            //全部载入后的操作...  
        } );  
    } );  
} );  
</script>

3. XMLHttpRequest 腳本注入

即透過AJAX 方式加載，不過這種方式無法實現跨網域加載，不適用於大型網站。

我們上面做的這些工作當然也已經被那些牛人們完成了，並寫成了一些優秀的JS 類庫以便我們使用，它們均能很好地解決JS 腳本的阻塞問題，實現並行下載，例如： YUI3、LazyLoad、LABjs 等。

以上就是如何加快JavaScript的載入與執行的內容，更多相關內容請關注PHP中文網（www.php.cn）！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何寫出規範的JavaScript程式碼下一篇：如何寫出規範的JavaScript程式碼

看更多

如何加快JavaScript的載入與執行

相關文章