首頁 > 文章 > web前端 > 如何讓JavaScript載入與執行效率更高實例程式碼詳解

如何讓JavaScript載入與執行效率更高實例程式碼詳解

伊谢尔伦原創: 2017-07-21 16:04:031257瀏覽

腳本可以放在html頁面的head裡面，也可以放在body裡面。

把腳本放在body中，當瀏覽器遇見3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤時，瀏覽器不知道腳本會插入文字還是html標籤，因此瀏覽器會停止分析html頁面而去執行腳本。當使用src的方式加入腳本時，瀏覽器也會做同樣的動作。在腳本處理的時候，頁面呈現和使用者互動將被完全阻止。腳本下載和執行阻塞了其他資源的下載，例如呈現頁面使用的圖片。
腳本的位置
鑑於上面的理由，腳本應該始終放在頁面的底部，即36cc49f0c466276486e50c850b7e4956前面。
一個簡單的範例:

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

合併腳本
因為腳本下載阻塞了頁面呈現，因而應該減少頁面3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤的使用，不管腳本是內聯的還是外部的。在處理外部腳本的時候情況比較特殊，瀏覽器下載一個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. 動態腳本元素
要知道3f1c4e4b6b16bbbd69b2ee476dc4f83a和普通的html標籤並沒有本質上的區別，所以可以利用標準的DOM方法動態的新增腳本檔案引用。方法如下：

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

當這個標籤一旦加入到html中，腳本檔就開始下載。這種方法的一個特點就是，檔案下載和執行並不阻塞html頁面其它部分的處理。通常將這樣的腳本放在93f0f5c25f18dab9d176bd4f6de5d30e中較之6c04bd5ca3fcae76e30b72ad730ca86d比較安全，尤其是檔案所包含的程式碼需要在頁面的load事件中執行。如果body的內容還沒有被完全的載入，IE也會跳出「禁止操作」的錯誤。
當腳本檔案下載完成之後，腳本立即執行（FF、Opera會等待前一個以相同方式新增的腳本執行）。當腳本自執行時，這沒什麼問題。但是如果腳本包含頁面中其它腳本使用的interfaces，你需要確認腳本已經加載完成並且可用。幸好，當獲得script標籤的src的值之後，Firefox, Opera, Chrome, and Safari 3+ 會觸發一個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事件。根據下載
腳本檔案所處的狀態，readyState 的值有以下幾種：
"uninitialized"
預設狀態
"loading"
開始下載
"loaded"
下載完成
"interactive"
下載完成，但並非全部可用
"complete"
所有資料可用
IE的實作方式：

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

以上是如何讓JavaScript載入與執行效率更高實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

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

上一篇：四種常用的javascript動態載入方法實作程式碼總結下一篇：四種常用的javascript動態載入方法實作程式碼總結

看更多