欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2013年03月04日 15:48:50   作者:  
默認情況javascript是同步加載的,javascript的加載時阻塞的,后面的元素要等待javascript加載完畢后才能進行再加載,如何解決這個問題呢,接下來將為你詳細介紹下異步加載js三種實現(xiàn)方案,感興趣的你可以參考下哈
默認情況javascript是同步加載的,也就是javascript的加載時阻塞的,后面的元素要等待javascript加載完畢后才能進行再加載,對于一些意義不是很大的javascript,如果放在頁頭會導致加載很慢的話,是會嚴重影響用戶體驗的。

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

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

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

(2) async
async的定義和用法(是HTML5的屬性)
async 屬性規(guī)定一旦腳本可用,則會異步執(zhí)行。
示例:
復制代碼 代碼如下:

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

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

(3) 創(chuàng)建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);
}

相關(guān)文章

最新評論