瀏覽器在處理HTML頁(yè)面渲染和JavaScript腳本執(zhí)行的時(shí)候是單一進(jìn)程的,所以在當(dāng)瀏覽器在渲染HTML遇到了<script>標(biāo)簽會(huì)先去執(zhí)行標(biāo)簽內(nèi)的代碼(如果是使用src屬性加載的外鏈文件,則先下載再執(zhí)行),在這個(gè)過(guò)程中,頁(yè)面渲染和交互都會(huì)被阻塞。
...雖然會(huì)有阻塞,但還是有幾招可以減少JavaScript對(duì)性能的影響的。
1.script標(biāo)簽的位置
當(dāng)<script>出現(xiàn)在<head>中的時(shí)候,比如:
<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>
這種加載多個(gè)js文件的時(shí)候,瀏覽器就會(huì)因先下載執(zhí)行js代碼而阻塞頁(yè)面渲染從而出現(xiàn)白屏頁(yè)面(瀏覽器解析到<body>標(biāo)簽之前,不會(huì)渲染頁(yè)面任何內(nèi)容),沒(méi)法預(yù)覽也沒(méi)法交互,很差勁的用戶體驗(yàn)阱缓。
注意:
- 現(xiàn)代瀏覽器支持資源并行下載,只限于
<script>下載外部資源的時(shí)候不會(huì)阻塞其他<script>標(biāo)簽,但會(huì)阻塞其他資源的下載。 - 下載JavaScript資源是異步的,但是執(zhí)行JavaScript代碼的時(shí)候仍是同步的,同樣會(huì)造成阻塞秸应。
所以把<script>后置到<body>標(biāo)簽的底部,保證執(zhí)行腳本之前已完成頁(yè)面渲染,是一種比較常用的JavaScript優(yōu)化手段。
2.合并多個(gè)script標(biāo)簽
瀏覽器解析HTML時(shí)遇到<script>都會(huì)因?yàn)閳?zhí)行腳本而有一定的延遲,對(duì)于有src屬性的外鏈則<script>更加,多HTTP請(qǐng)求則會(huì)帶來(lái)更多的性能開(kāi)銷(xiāo),盡量減少這種延遲,也是一種優(yōu)化手段,可以合并多個(gè)js文件來(lái)減少HTTP請(qǐng)求的次數(shù),減少三次握手的次數(shù)和多余的HTTP頭傳輸,降低響應(yīng)時(shí)間提高用戶體驗(yàn)碑宴。網(wǎng)上有許多合并js的方案以及工具,在這不敘述了软啼。
3.使用無(wú)阻塞下載JavaScript的方法
- 使用script標(biāo)簽的defer和async屬性
- 使用動(dòng)態(tài)創(chuàng)建的script標(biāo)簽來(lái)下載執(zhí)行JavaScript代碼
- 使用XHR對(duì)象下載JavaScript代碼并注入頁(yè)面
3.1.使用script標(biāo)簽的defer和async屬性
async和defer屬性都是用于異步加載js文件,期間不會(huì)才生阻塞瀏覽器其他進(jìn)程,區(qū)別在于async是加載完之后自動(dòng)執(zhí)行,而defer需要等到頁(yè)面加載之后再執(zhí)行,需要注意的一點(diǎn)是這兩個(gè)屬性必須在有src屬性的<script>標(biāo)簽中(外鏈腳本)才有效。下面是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");一行代碼
async的例子也是相同的頁(yè)面結(jié)構(gòu),這里就不擺例子了,可以戳下面的鏈接延柠。
defer example的鏈接戳這里!
async example的鏈接戳這里!
雖然頁(yè)面結(jié)構(gòu)一樣,但不一樣的是
打開(kāi)defer.html依次看到是: 彈出"script"的alert框=>頁(yè)面渲染出文字=>彈出"defer"的alert框=>彈出"load"的alert框
打開(kāi)async.html依次看到是: 彈出"script"的alert框=>彈出"async"的alert框=>頁(yè)面渲染出文字=>彈出"load"的alert框
3.2.使用動(dòng)態(tài)創(chuàng)建的script標(biāo)簽來(lái)下載執(zhí)行JavaScript代碼
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);
file.js在script元素添加到頁(yè)面時(shí)就啟動(dòng)下載,使用這種方式的優(yōu)勢(shì)在于file.js的下載和執(zhí)行不會(huì)阻塞頁(yè)面其他進(jìn)程祸挪。
下面是普通方式和動(dòng)態(tài)添加腳本方式的兩個(gè)demo,file.js中僅僅是一個(gè)10000次的for循環(huán)和之后彈出一個(gè)alert框的幾句代碼。
動(dòng)態(tài)添加script元素的Demo鏈接戳這里!
普通的引入script腳本Demo鏈接戳這里!
從demo上可以明顯的看出動(dòng)態(tài)加載方式可以在alert框彈出之前先看到頁(yè)面上的文字,但是普通的方式只有在alert框彈出之后才可以看到頁(yè)面上的文字贞间。
我們可以封裝一個(gè)跨瀏覽器的讀取script腳本并動(dòng)態(tài)創(chuàng)建script標(biāo)簽的函數(shù):
function loadScript(url,callback){
var script = document.createElement("script");
script.type = "text/javascript";
//檢測(cè)客戶端類(lèi)型
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);
}
這類(lèi)動(dòng)態(tài)加載腳本的方法兼容性好,也比較簡(jiǎn)單,是一種常用的無(wú)阻塞解決方案。
3.3.使用XHR對(duì)象下載JavaScript代碼并注入頁(yè)面
另一種無(wú)阻塞加載腳本的方式是使用XMLHttpRequest(XHR)對(duì)象獲取腳本并注入頁(yè)面中增热。
這種技術(shù)會(huì)先創(chuàng)建一個(gè)XHR對(duì)象,然后用他下載JavaScript文件,最后通過(guò)常見(jiàn)動(dòng)態(tài)<script>元素將代碼注入頁(yè)面中整以。
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);
}
}
}
Demo在這兒!快讓我到碗里去!
以上代碼發(fā)送GET請(qǐng)求file.js文件,onReadyStateChange檢測(cè)readyState是否為4(4表示請(qǐng)求完成)和HTTP狀態(tài)嗎是否有效(200表示有效響應(yīng),304表示讀取緩存)。判斷響應(yīng)有效之后,就動(dòng)態(tài)創(chuàng)建一個(gè)<script>標(biāo)簽,內(nèi)容就是服務(wù)器接收到的responseText恶迈。
這種方法的優(yōu)點(diǎn)以及缺點(diǎn):
- 優(yōu)點(diǎn):下載JavaScript代碼可以不立即執(zhí)行,且兼容性好適合所有主流瀏覽器。
- 缺點(diǎn):JavaScript文件必須與所請(qǐng)求頁(yè)面處于同一個(gè)域,這種情況下JavaScript文件不能從CDN下載,不適合大型的Web應(yīng)用轿秧。
4.一種推薦的無(wú)阻塞方案
如果頁(yè)面有大量的JavaScript代碼需要添加,可以先在頁(yè)面中去外鏈之前我們封裝好的動(dòng)態(tài)讀取script腳本的函數(shù)loadScript,然后再使用它去加載其他所需腳本,例如:
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
loadScript("file.js",function(){
//do something
});
</script>
這樣只需在第一個(gè)<script>下載比較精簡(jiǎn)的loader.js文件時(shí)對(duì)頁(yè)面有些許影響,之后的<script>并不會(huì)有太多影響菇篡。
