快捷導(dǎo)航

js異步加載的三種解決方案

更新時間：2013年03月04日 15:48:50 作者：

默認(rèn)情況javascript是同步加載的,javascript的加載時阻塞的，后面的元素要等待javascript加載完畢后才能進(jìn)行再加載,如何解決這個問題呢,接下來將為你詳細(xì)介紹下異步加載js三種實(shí)現(xiàn)方案,感興趣的你可以參考下哈

默認(rèn)情況javascript是同步加載的，也就是javascript的加載時阻塞的，后面的元素要等待javascript加載完畢后才能進(jìn)行再加載，對于一些意義不是很大的javascript，如果放在頁頭會導(dǎo)致加載很慢的話，是會嚴(yán)重影響用戶體驗(yàn)的。

(1) defer，只支持IE
defer屬性的定義和用法（我摘自w3school網(wǎng)站）
defer 屬性規(guī)定是否對腳本執(zhí)行進(jìn)行延遲，直到頁面加載為止。
有的 javascript 腳本 document.write 方法來創(chuàng)建當(dāng)前的文檔內(nèi)容，其他腳本就不一定是了。

如果您的腳本不會改變文檔的內(nèi)容，可將 defer 屬性加入到 <script> 標(biāo)簽中，以便加快處理文檔的速度。因?yàn)闉g覽器知道它將能夠安全地讀取文檔的剩余部分而不用執(zhí)行腳本，它將推遲對腳本的解釋，直到文檔已經(jīng)顯示給用戶為止。
示例：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script> 

(2) async：
async的定義和用法(是HTML5的屬性)
async 屬性規(guī)定一旦腳本可用，則會異步執(zhí)行。
示例：

復(fù)制代碼代碼如下:

注釋：async 屬性僅適用于外部腳本（只有在使用 src 屬性時）。
注釋：有多種執(zhí)行外部腳本的方法：
•如果 async="async"：腳本相對于頁面的其余部分異步地執(zhí)行（當(dāng)頁面繼續(xù)進(jìn)行解析時，腳本將被執(zhí)行）
•如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執(zhí)行
•如果既不使用 async 也不使用 defer：在瀏覽器繼續(xù)解析頁面之前，立即讀取并執(zhí)行腳本

(3) 創(chuàng)建script，插入到DOM中，加載完畢后callBack，見代碼：

復(fù)制代碼代碼如下:

 
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); 
} 