編寫高性能的JavaScript 腳本的加載與執行
2024-05-06 14:10:21
供稿：網友
腳本可以放在html頁面的head里面，也可以放在body里面。
把腳本放在body中，當瀏覽器遇見<script>標簽時， 瀏覽器不知道腳本會插入文本還是html標簽，因此瀏覽器會停止分析html頁面而去執行腳本。當使用src的方式添加腳本時，瀏覽器也會做同樣的動作。在腳本處理的時候，頁面呈現和用戶交互將被完全阻止。腳本下載和執行阻塞了其他資源的下載，比如呈現頁面使用的圖片。（雖然很多瀏覽器實現了腳本并行下載的技術，但是這個問題依然沒有解決）
腳本的位置
鑒于上面的理由，腳本應該始終放在頁面的底部，即</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>
合并腳本
因為腳本下載阻塞了頁面呈現，因而應該減少頁面<script>標簽的使用，不管腳本是內聯的還是外部的。在處理外部腳本的時候情況比較特殊，瀏覽器下載一個100kb的腳本的時間將遠遠小于4個25kb的腳本，因為建立一個請求要消耗大量的時間。所以頁面應該盡量的減少外部腳本的引用。
非阻塞的腳本
秘訣在于當頁面loading完成之后再來加載腳本，也就是在window對象的onload事件觸發之前 。下面是實現的幾種方式：
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>
頁面彈出框出現的順序： script/defer/load,這個技術的缺點是IE4+和FF3.5+才支持。
非阻塞的腳本（續）
2. 動態腳本元素
要知道<script>和普通的html標簽并沒有本質的區別，所以可以利用標準的DOM方法動態的添加腳本文件引用。方法如下：
代碼如下:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
當這個標簽一旦加入到html中，腳本文件就開始下載。這種方法的一個特點就是，文件下載和執行并不阻塞html頁面其它部分的處理。通常將這樣的腳本放在<head>中較之<body>更加安全，尤其是文件包含的代碼需要在頁面的load事件中執行。如果body的內容還沒有被完全的加載，IE還會彈出“禁止操作”的錯誤。
