異步加載JS腳本

《異步加載JS腳本》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、異步加載JS腳本　　　　JavaScript腳本對(duì)現(xiàn)代網(wǎng)站來(lái)說(shuō)是必不可少的。當(dāng)用戶訪問(wèn)站點(diǎn)，需要下載各種資源，例如JS腳本，CSS，圖片，iframe等?！　g覽器下載除JS外的資源時(shí)，會(huì)并行下載，以提高性能。但下載JS腳本時(shí)，會(huì)禁止并行下載(稱(chēng)為腳本阻塞ScriptsBlockDownloads)。瀏覽器遇到JS時(shí)，必須等JS下載，解析，執(zhí)行完后，才能繼續(xù)并行下載下一個(gè)資源。原因是JS可能會(huì)改變頁(yè)面或改變JS間的依賴(lài)關(guān)系，例如A.js中用document.write改變頁(yè)面，B.js依賴(lài)于A.js。因此要嚴(yán)格保證順序

2、，不能并行下載。因此不推薦將JS放到標(biāo)簽里，你可以點(diǎn)擊例子頁(yè)面試一下。瀏覽器遇到　　這屬于靜態(tài)腳本元素，瀏覽器執(zhí)行到這里發(fā)現(xiàn)script元素，會(huì)按上面所說(shuō)的，下載解析執(zhí)行腳本，同時(shí)阻塞其他資源文件的下載。而動(dòng)態(tài)腳本元素如下：varscript=document.createElement('script');//創(chuàng)建script標(biāo)簽script.

5、type="text/javascript";script.src="A.js";document.getElementsByTagName('head')[0].appendChild(script);//塞進(jìn)頁(yè)面　　先用document.createElement(‘script’)生成一個(gè)script標(biāo)簽，再設(shè)置它的src屬性，最后將其插入到中。　　script標(biāo)簽被插入到頁(yè)面的DOM樹(shù)后，就會(huì)開(kāi)始下載src屬性指定的腳本。而且通過(guò)動(dòng)態(tài)腳本元素下載腳本是異步的，不會(huì)阻塞頁(yè)面的其他下載和處理過(guò)程，因此script標(biāo)

6、簽插入中也沒(méi)問(wèn)題?！　‘?dāng)JS下載完畢后，就會(huì)立即執(zhí)行。如果多個(gè)JS間有依賴(lài)關(guān)系，一下載完馬上執(zhí)行可能會(huì)出現(xiàn)error。因此通常來(lái)說(shuō)你應(yīng)該將有依賴(lài)關(guān)系的JS合并成一個(gè)文件，雖然合并后JS文件會(huì)變大，但由于是異步下載，你幾乎不會(huì)有什么損失?！　∪绻麑?shí)在不方便將有依賴(lài)關(guān)系的文件合并。你需要自己指定先后順序，通過(guò)監(jiān)聽(tīng)load事件(IE是onreadystatechange)來(lái)確保依次加載腳本：functionloadScript(url,callback){varscript=document.createElement("s

7、cript")script.type="text/javascript";if(script.readyState){//IEscript.onreadystatechange=function(){if(script.readyState=="loaded"

8、

9、script.readyState=="complete"){script.onreadystatechange=null;callback();}};}else{//Othersscript.onload=function(){callback();};}s

10、cript.src=url;document.getElementsByTagName("head")[0].appendChild(script);}//嚴(yán)格確保A->B->C，依次下載腳本文件loadScript("A-delay.js",function(){loadScript("B-delay.js",function(