異步加載js的幾種方式

默認狀況javascript是同步加載的，也就是javascript的加載時阻塞的，後面的元素要等待javascript加載完畢後才能進行再加載，對於一些意義不是很大的javascript，若是放在頁頭會致使加載很慢的話，是會嚴重影響用戶體驗的。

(1) defer，只支持IE
defer屬性的定義和用法（我摘自w3school網站）
defer 屬性規定是否對腳本執行進行延遲，直到頁面加載爲止。
有的 javascript 腳本 document.write 方法來建立當前的文檔內容，其餘腳本就不必定是了。

若是您的腳本不會改變文檔的內容，可將 defer 屬性加入到

(2) async：
async的定義和用法(是HTML5的屬性)
async 屬性規定一旦腳本可用，則會異步執行。
示例：
複製代碼 代碼以下:

註釋：async 屬性僅適用於外部腳本（只有在使用 src 屬性時）。
註釋：有多種執行外部腳本的方法：
•若是 async="async"：腳本相對於頁面的其他部分異步地執行（當頁面繼續進行解析時，腳本將被執行）
•若是不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行
•若是既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面以前，當即讀取並執行腳本

(3) 建立script，插入到DOM中，加載完畢後callBack，見代碼：
複製代碼 代碼以下:

function loadScript(url, callback){
var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}