在頁面加載性能當(dāng)中，頁面被阻塞是影響頁面主要內(nèi)容(包括圖片等)及時(shí)呈現(xiàn)在用戶面前的一個(gè)重要因素之一，所以我們需要在頁面中合理處置外調(diào)CSS及JS文件。
來看一段代碼

有firebug的童鞋可以看到，頁面內(nèi)容及圖片等被head里面的外調(diào)script及css文件所阻塞，頁面加載耗時(shí)5.5S，如下圖

樣式表下面如果有script標(biāo)簽則同樣會(huì)阻塞后續(xù)頁面內(nèi)容的加載，但我們通常希望優(yōu)先加載樣式表，這樣才不會(huì)看到裸奔的頁面，所以我們只須關(guān)注script的無阻塞加載即可。

看下面這一段js

function loadScript(url, callback) {
        //創(chuàng)建script
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
        //加載完畢回調(diào)
        if(script.readyState) { //for IE
                script.onreadystatechange = function() {
                        if(script.readyState == "loaded" || script.readyState == "complete") {
                                script.onreadystatechange = null; //此處銷毀事件引用，防止IE下事件駐留內(nèi)存
                                if(callback){callback();}
                        }
                };
        } else { //for Others
                script.onload = function() {
                        if(callback){callback();}
                };
        }
}

以上代碼可以看出，我們是用一個(gè)js動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽，然后賦值src來進(jìn)行加載外部JS，同時(shí)提供一個(gè)回調(diào)函數(shù)，以保證在腳本加載完畢才執(zhí)行的那些函數(shù)代碼可以正常運(yùn)行。

再看一下優(yōu)化后的頁面

再次用firebug可以看到圖片已經(jīng)沒有被腳本阻塞，與腳本是并行加載的，整個(gè)頁面加載時(shí)間也減少不少，頁面總耗時(shí)減少為2.9S,如下圖

但還是有問題，在loadScript與頁面內(nèi)容之間如果還有script標(biāo)簽的話，一樣會(huì)阻塞內(nèi)容下載，解決方案就是給loadScript加個(gè)setTimeout執(zhí)行，徹底將加載JS移出文檔加載流，實(shí)現(xiàn)異步加載,就不會(huì)再阻塞頁面其他內(nèi)容了，看如下完整代碼：