讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議176:推薦最優化非阻塞模式 >

建議176:推薦最優化非阻塞模式

如果向頁面加載大量JavaScript,則推薦的方法可分為兩個步驟:

第1步,動態加載JavaScript所需的代碼。

第2步,加載頁面初始化所需的除JavaScript之外的部分。這部分代碼要盡量小,可能只包含loadScript函數,下載和運行非常快,不會對頁面造成很大干擾。當初始代碼準備好之後,用它來加載其餘的JavaScript。


<script type="text/javascript"src="loader.js"></script>

<script type="text/javascript">

loadScript("the-rest.js",function{

Application.init;

});

</script>


在上面代碼中,將腳本放置在body的關閉標籤</body>之前。這樣做有幾點好處:首先,可以確保JavaScript運行不會影響頁面其他部分顯示;其次,當第二部分JavaScript文件完成下載時,所有應用程序所必須的DOM已經創建好了,並且做好被訪問的準備,避免使用額外的事件處理來得知頁面是否已經準備好了。

向頁面加載大量JavaScript的另一個方法是直接將loadScript函數嵌入在頁面中,這可以避免另一次HTTP請求,例如:


<script type="text/javascript">

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_r("head")[0].appendChild(script);

}

loadScript("the-rest.js",function{

Application.init;

});

</script>