async的例子也是相同的頁(yè)面結(jié)構(gòu),這里就不擺例子了,可以戳下面的鏈接。
defer example的鏈接戳這里!
async example的鏈接戳這里!
雖然頁(yè)面結(jié)構(gòu)一樣,但不一樣的是

打開(kāi)defer.html依次看到是: 彈出"script"的alert框=>頁(yè)面渲染出文字=>彈出"defer"的alert框=>彈出"load"的alert框

打開(kāi)async.html依次看到是: 彈出"script"的alert框=>彈出"async"的alert框=>頁(yè)面渲染出文字=>彈出"load"的alert框

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);

file.js在script元素添加到頁(yè)面時(shí)就啟動(dòng)下載,使用這種方式的優(yōu)勢(shì)在于file.js的下載和執(zhí)行不會(huì)阻塞頁(yè)面其他進(jìn)程。
下面是普通方式和動(dòng)態(tài)添加腳本方式的兩個(gè)demo,file.js中僅僅是一個(gè)10000次的for循環(huán)和之后彈出一個(gè)alert框的幾句代碼。
動(dòng)態(tài)添加script元素的Demo鏈接戳這里!
普通的引入script腳本Demo鏈接戳這里!
從demo上可以明顯的看出動(dòng)態(tài)加載方式可以在alert框彈出之前先看到頁(yè)面上的文字,但是普通的方式只有在alert框彈出之后才可以看到頁(yè)面上的文字。

我們可以封裝一個(gè)跨瀏覽器的讀取script腳本并動(dòng)態(tài)創(chuàng)建script標(biāo)簽的函數(shù):

function loadScript(url,callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    //檢測(cè)客戶(hù)端類(lèi)型
    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("head")[0].appendChild(script);
}

這類(lèi)動(dòng)態(tài)加載腳本的方法兼容性好,也比較簡(jiǎn)單,是一種常用的無(wú)阻塞解決方案。

另一種無(wú)阻塞加載腳本的方式是使用XMLHttpRequest(XHR)對(duì)象獲取腳本并注入頁(yè)面中。
這種技術(shù)會(huì)先創(chuàng)建一個(gè)XHR對(duì)象,然后用他下載JavaScript文件,最后通過(guò)常見(jiàn)動(dòng)態(tài)

這樣只需在第一個(gè)