如果向頁面加載大量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>