国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

高性能JavaScript學習筆記-執行與加載

fou7 / 3079人閱讀

摘要：雖然會有阻塞但還是有幾招可以減少對性能的影響的。下載資源是異步的但是執行代碼的時候仍是同步的同樣會造成阻塞。缺點文件必須與所請求頁面處于同一個域這種情況下文件不能從下載不適合大型的應用。

瀏覽器在處理HTML頁面渲染和JavaScript腳本執行的時候是單一進程的,所以在當瀏覽器在渲染HTML遇到了

這種加載多個js文件的時候,瀏覽器就會因先下載執行js代碼而阻塞頁面渲染從而出現白屏頁面(瀏覽器解析到標簽之前,不會渲染頁面任何內容),沒法預覽也沒法交互,很差勁的用戶體驗。

注意:

現代瀏覽器支持資源并行下載,只限于

defer demo
defer demo
defer demo
defer demo
defer demo
defer demo
defer demo
defer demo
defer demo
defer demo
defer demo
defer demo
//defer.js的文件下只有alert("defer");一行代碼

async的例子也是相同的頁面結構,這里就不擺例子了,可以戳下面的鏈接。
defer example的鏈接戳這里!
async example的鏈接戳這里!
雖然頁面結構一樣,但不一樣的是

打開defer.html依次看到是: 彈出"script"的alert框=>頁面渲染出文字=>彈出"defer"的alert框=>彈出"load"的alert框

打開async.html依次看到是: 彈出"script"的alert框=>彈出"async"的alert框=>頁面渲染出文字=>彈出"load"的alert框

3.2.使用動態創建的script標簽來下載執行JavaScript代碼 
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);

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

我們可以封裝一個跨瀏覽器的讀取script腳本并動態創建script標簽的函數:

function loadScript(url,callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    //檢測客戶端類型
    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);
}

這類動態加載腳本的方法兼容性好,也比較簡單,是一種常用的無阻塞解決方案。

3.3.使用XHR對象下載JavaScript代碼并注入頁面

另一種無阻塞加載腳本的方式是使用XMLHttpRequest(XHR)對象獲取腳本并注入頁面中。
這種技術會先創建一個XHR對象,然后用他下載JavaScript文件,最后通過常見動態

這樣只需在第一個

閱讀需要支付1元查看
<