JAVASCRIPT高效能執行和載入（阻塞特性）

langgufu314發表於2011-09-07
JavaScript
[size=medium][color=blue]阻塞特性：
JS 有個很無語的阻塞特性，就是當瀏覽器在執行JS 程式碼時，不能同時做其他任何事情，無論其程式碼是內嵌的還是外部的。

指令碼位置：
瀏覽器在碰到一個引入外部JS 檔案的<script>標籤時會停下所有工作來下載並解析執行它，在這個過程中，頁面渲染和使用者互動完全被阻塞了，為了避免頁面載入時的停頓甚至空白頁的出現，JS 指令碼應儘量放置在頁面底部，這點很重要：

<html>
<head>
<title>無標題文件</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</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 請求會帶來額外的效能開銷，也就是說應減少頁面中外鏈指令碼的數量。

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

<html>
<head>
<title>無標題文件</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</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 type="text/javascript" src="file1.js" defer></script>

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

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

function load_script(url, callback)
{ var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState)
{ //IE
script.onreadystatechange = functio()
{
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);
}

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

<script type="text/javascript"src="load_script.js"></script>
<script type="text/javascript">
load_script("file1.js", function()
{
load_script("file2.js", function()
{
load_script("file3.js", functio() {
//全部載入後的操作...
} );
} );
} );
</script>

3.XMLHttpRequest 指令碼注入

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

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

相關文章