js異步加載的三種解決方案
2024-05-06 14:19:30
供稿：網友
默認情況javascript是同步加載的，也就是javascript的加載時阻塞的，后面的元素要等待javascript加載完畢后才能進行再加載，對于一些意義不是很大的javascript，如果放在頁頭會導致加載很慢的話，是會嚴重影響用戶體驗的。
(1) defer，只支持IE
defer屬性的定義和用法（我摘自w3school網站）
defer 屬性規定是否對腳本執行進行延遲，直到頁面加載為止。
有的 javascript 腳本 document.write 方法來創建當前的文檔內容，其他腳本就不一定是了。
如果您的腳本不會改變文檔的內容，可將 defer 屬性加入到 <script> 標簽中，以便加快處理文檔的速度。因為瀏覽器知道它將能夠安全地讀取文檔的剩余部分而不用執行腳本，它將推遲對腳本的解釋，直到文檔已經顯示給用戶為止。
示例：
代碼如下:
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
(2) async：
async的定義和用法(是HTML5的屬性)
async 屬性規定一旦腳本可用，則會異步執行。
示例：
代碼如下:
<script type="text/javascript" src="demo_async.js" async="async"></script>
注釋：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);
}
