編寫高性能的JavaScript 腳本的加載與執(zhí)行

更新時間：2010年04月19日 18:43:08 作者：

把腳本放在body中，當瀏覽器遇見<script>標簽時，瀏覽器不知道腳本會插入文本還是html標簽，因此瀏覽器會停止分析html頁面而去執(zhí)行腳本。

腳本可以放在html頁面的head里面，也可以放在body里面。
把腳本放在body中，當瀏覽器遇見<script>標簽時，瀏覽器不知道腳本會插入文本還是html標簽，因此瀏覽器會停止分析html頁面而去執(zhí)行腳本。當使用src的方式添加腳本時，瀏覽器也會做同樣的動作。在腳本處理的時候，頁面呈現(xiàn)和用戶交互將被完全阻止。腳本下載和執(zhí)行阻塞了其他資源的下載，比如呈現(xiàn)頁面使用的圖片。（雖然很多瀏覽器實現(xiàn)了腳本并行下載的技術，但是這個問題依然沒有解決）
腳本的位置
鑒于上面的理由，腳本應該始終放在頁面的底部，即</body>前面。
一個簡單的示例:

復制代碼代碼如下:

 
<html> 
<head> 
<title>Script Example</title> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 
<p>Hello world!</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> 

合并腳本
因為腳本下載阻塞了頁面呈現(xiàn)，因而應該減少頁面<script>標簽的使用，不管腳本是內聯(lián)的還是外部的。在處理外部腳本的時候情況比較特殊，瀏覽器下載一個100kb的腳本的時間將遠遠小于4個25kb的腳本，因為建立一個請求要消耗大量的時間。所以頁面應該盡量的減少外部腳本的引用。
非阻塞的腳本
秘訣在于當頁面loading完成之后再來加載腳本，也就是在window對象的onload事件觸發(fā)之前。下面是實現(xiàn)的幾種方式：
1.使用defer

復制代碼代碼如下:

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

頁面彈出框出現(xiàn)的順序： script/defer/load,這個技術的缺點是IE4+和FF3.5+才支持。
非阻塞的腳本（續(xù)）
2. 動態(tài)腳本元素
要知道<script>和普通的html標簽并沒有本質的區(qū)別，所以可以利用標準的DOM方法動態(tài)的添加腳本文件引用。方法如下：

復制代碼代碼如下:

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

當這個標簽一旦加入到html中，腳本文件就開始下載。這種方法的一個特點就是，文件下載和執(zhí)行并不阻塞html頁面其它部分的處理。通常將這樣的腳本放在<head>中較之<body>更加安全，尤其是文件包含的代碼需要在頁面的load事件中執(zhí)行。如果body的內容還沒有被完全的加載，IE還會彈出“禁止操作”的錯誤。
當腳本文件下載完成之后，腳本立即執(zhí)行（FF、Opera會等待前一個以同樣方式添加的腳本執(zhí)行）。當腳本自執(zhí)行時，這沒什么問題。但是如果腳本包含頁面中其它腳本使用的interfaces，你需要確認腳本已經加載完成并且可用。幸好，當獲得script標簽的src的值之后，F(xiàn)irefox, Opera, Chrome, and Safari 3+ 會觸發(fā)一個load事件。

復制代碼代碼如下:

 
var script = document.createElement("script") 
script.type = "text/javascript"; 
//Firefox, Opera, Chrome, Safari 3+ 
script.onload = function(){ 
alert("Script loaded!"); 
}; 
script.src = "file1.js"; 
document.getElementsByTagName("head")[0].appendChild(script); 

IE則提供了另外一種解決方案--readystatechange事件。根據下載
腳本文件所處的狀態(tài)，readyState 的值有以下幾種：
"uninitialized"
默認狀態(tài)
"loading"
開始下載
"loaded"
下載完成
"interactive"
下載完成，但是并非全部可用
"complete"
所有數據可用
IE的實現(xiàn)方式：

復制代碼代碼如下:

 
var script = document.createElement("script") 
script.type = "text/javascript"; 
script.onreadystatechange = function(){ 
if (script.readyState == "loaded" || script.readyState == "complete"){ 
script.onreadystatechange = null; 
alert("Script loaded."); 
} 
}; 
script.src = "file1.js"; 
document.getElementsByTagName("head")[0].appendChild(script); 

下面是綜合以后的通用方法：

復制代碼代碼如下:

 
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); 
} 
The loadScript() function is used as follows: 
loadScript("file1.js", function(){ 
alert("File is loaded!"); 
}); 

現(xiàn)在你可以按這種動態(tài)方式加載腳本了，但是你仍然需要考慮這些文件的下載順序。主流瀏覽器中只有FF和Opera保證腳本的執(zhí)行順序和你指定的下載順序一致，其他瀏覽器將按照腳本文件從服務器返回的順序來執(zhí)行。雖然如此，我們仍然有替代的解決方案：

復制代碼代碼如下:

 
loadScript("file1.js", function(){ 
loadScript("file2.js", function(){ 
loadScript("file3.js", function(){ 
alert("All files are loaded!"); 
}); 
}); 
}); 

這樣我們就能保證腳本文件的下載順序嚴格的按照file1-file2-file3的方式進行。
注明：以上內容來自：<High Performance JavaScript>by Nicholas C. Zakas

您可能感興趣的文章: