高性能JavaScript學習筆記-執行與加載
來自： http://segmentfault.com/a/1190000004379833
瀏覽器在處理HTML頁面渲染和JavaScript腳本執行的時候是單一進程的,所以在當瀏覽器在渲染HTML遇到了 <script> 標簽會先去執行標簽內的代碼(如果是使用src屬性加載的外鏈文件,則先下載再執行),在這個過程中,頁面渲染和交互都會被阻塞。
...雖然會有阻塞,但還是有幾招可以減少JavaScript對性能的影響的。
1.script標簽的位置
當 <script> 出現在 <head> 中的時候,比如:
<head>
<script type="text/javascript" src="js1.js"></script>
<script type="text/javascript" src="js2.js"></script>
<script type="text/javascript" src="js3.js"></script>
</head>
這種加載多個js文件的時候,瀏覽器就會因先下載執行js代碼而阻塞頁面渲染從而出現白屏頁面(瀏覽器解析到 <body> 標簽之前,不會渲染頁面任何內容),沒法預覽也沒法交互,很差勁的用戶體驗。
注意:
-
現代瀏覽器支持資源并行下載,只限于 <script> 下載外部資源的時候不會阻塞其他 <script> 標簽,但會阻塞其他資源的下載。
-
下載JavaScript資源是異步的,但是執行JavaScript代碼的時候仍是同步的,同樣會造成阻塞。
所以把 <script> 后置到 <body> 標簽的底部,保證執行腳本之前已完成頁面渲染,是一種比較常用的JavaScript優化手段。
2.合并多個script標簽
瀏覽器解析HTML時遇到 <script> 都會因為執行腳本而有一定的延遲,對于有src屬性的外鏈則 <script> 更加,多HTTP請求則會帶來更多的性能開銷,盡量減少這種延遲,也是一種優化手段,可以合并多個js文件來減少HTTP請求的次數,減少三次握手的次數和多余的HTTP頭傳輸,降低響應時間提高用戶體驗。網上有許多合并js的方案以及工具,在這不敘述了。
3.使用無阻塞下載JavaScript的方法
-
使用script標簽的defer和async屬性
-
使用動態創建的script標簽來下載執行JavaScript代碼
-
使用XHR對象下載JavaScript代碼并注入頁面
3.1.使用script標簽的defer和async屬性
async和defer屬性都是用于異步加載js文件,期間不會才生阻塞瀏覽器其他進程,區別在于async是加載完之后自動執行,而defer需要等到頁面加載之后再執行,需要注意的一點是這兩個屬性必須在有src屬性的 <script> 標簽中(外鏈腳本)才有效。下面是demo:
<!DOCTYPE html>
<html>
<head>
<title>defer example</title>
</head>
<body>
<script type="text/javascript" src="defer.js" defer></script>
<script>
alert("script");
</script>
<script>
window.onload= function(){
alert("load");
}
</script>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
<div class="demo">defer demo</div>
</body>
</html>
//defer.js的文件下只有alert("defer");一行代碼</pre>
async的例子也是相同的頁面結構,這里就不擺例子了,可以戳下面的鏈接。
雖然頁面結構一樣,但不一樣的是
</div>
-
打開defer.html依次看到是: 彈出"script"的alert框=>頁面渲染出文字=>彈出"defer"的alert框=>彈出"load"的alert框
-
打開async.html依次看到是: 彈出"script"的alert框=>彈出"async"的alert框=>頁面渲染出文字=>彈出"load"的alert框
3.2.使用動態創建的script標簽來下載執行JavaScript代碼
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);
file.js在script元素添加到頁面時就啟動下載,使用這種方式的優勢在于 file.js的下載和執行不會阻塞頁面其他進程。
下面是普通方式和動態添加腳本方式的兩個demo,file.js中僅僅是一個10000次的for循環和之后彈出一個alert框的幾句代碼。
從demo上可以明顯的看出動態加載方式可以在alert框彈出之前先看到頁面上的文字,但是普通的方式只有在alert框彈出之后才可以看到頁面上的文字。
</div>
我們可以封裝一個跨瀏覽器的讀取script腳本并動態創建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{//其他瀏覽器
script.onload = function(){
callback();
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}</pre>
這類動態加載腳本的方法兼容性好,也比較簡單,是一種常用的無阻塞解決方案。
3.3.使用XHR對象下載JavaScript代碼并注入頁面
另一種無阻塞加載腳本的方式是使用XMLHttpRequest(XHR)對象獲取腳本并注入頁面中。
這種技術會先創建一個XHR對象,然后用他下載JavaScript文件,最后通過常見動態 <script> 元素將代碼注入頁面中。
var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300||xhr.status==304){
var script = document.createElement("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
}
以上代碼發送GET請求file.js文件,onReadyStateChange檢測readyState是否為4(4表示請求完成)和HTTP狀態嗎是否有效(200表示有效響應,304表示讀取緩存)。判斷響應有效之后,就動態創建一個 <script> 標簽,內容就是服務器接收到的responseText。
</div>
這種方法的優點以及缺點:
-
優點:下載JavaScript代碼可以不立即執行,且兼容性好適合所有主流瀏覽器。
-
缺點:JavaScript文件必須與所請求頁面處于同一個域,這種情況下JavaScript文件不能從CDN下載,不適合大型的Web應用。
4.一種推薦的無阻塞方案
如果頁面有大量的JavaScript代碼需要添加,可以先在頁面中去外鏈之前我們封裝好的動態讀取script腳本的函數loadScript,然后再使用它去加載其他所需腳本,例如:
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
loadScript("file.js",function(){
//do something
});
</script>
這樣只需在第一個 <script> 下載比較精簡的loader.js文件時對頁面有些許影響,之后的 <script> 并不會有太多影響。
</div>
本文由用戶 ErmFouch 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
相關經驗
相關資訊