重新認(rèn)識(shí)script標(biāo)簽

Magicer 發(fā)布于2019-08-20 11:24 / 2203人閱讀

摘要：盡管腳本的下載過(guò)程中不會(huì)相互影響，但頁(yè)面仍然要等到所有代碼下載并完成執(zhí)行才能繼續(xù)。

defer和asnyc（只對(duì)外部文件有效）

defer 在頁(yè)面完成解析時(shí)執(zhí)行代碼，這個(gè)屬性表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造，在元素中設(shè)置這個(gè)屬性相當(dāng)于告訴瀏覽器立即下載但延遲執(zhí)行

async 相對(duì)于頁(yè)面其他部分異步執(zhí)行腳本，一般的script標(biāo)簽都是會(huì)阻塞頁(yè)面執(zhí)行的，沒(méi)有加上async屬性的標(biāo)簽會(huì)阻塞后面的標(biāo)簽的解析。一般用在不需要操作dom元素的腳本上，例如一些統(tǒng)計(jì)代碼（跟頁(yè)面執(zhí)行邏輯無(wú)關(guān)的，不涉及dom操作的），可以避免因長(zhǎng)時(shí)間加載而呈現(xiàn)白屏現(xiàn)象

script中有或沒(méi)有它們的區(qū)別

script中沒(méi)有defer和async，會(huì)立刻加載并執(zhí)行

script中有async沒(méi)有defer時(shí)，會(huì)與渲染后續(xù)文檔元素并行加載，加載完自動(dòng)執(zhí)行

script中有defer沒(méi)有async時(shí)，后續(xù)文檔元素渲染會(huì)與腳本文件加載并行，但是執(zhí)行所有元素解析完成之后，在DOMContentLoaded之前執(zhí)行

https://segmentfault.com/q/10... 這個(gè)回答很棒

但是紅寶書(shū)中有這樣一句話：HTML5規(guī)范要求腳本執(zhí)行應(yīng)該按照腳本出現(xiàn)的先后順序執(zhí)行，但在現(xiàn)實(shí)生活中，延遲腳本并不一定按照順序執(zhí)行，也不一定會(huì)在DOMContentLoaded事件中觸發(fā)前執(zhí)行，因此最好只包含一個(gè)延遲腳本。因此上圖第三點(diǎn)說(shuō)法有欠缺

未解決問(wèn)題：所有瀏覽器都兼容，那么為什么沒(méi)有看到別人在用呢？

查了一下，網(wǎng)易有在用，瀏覽器兼容還是有點(diǎn)小問(wèn)題，and業(yè)務(wù)需求

script是可以并行下載的，這里應(yīng)該是指放在head中的script標(biāo)簽，不會(huì)阻塞其他script標(biāo)簽，但是仍然會(huì)阻塞其他資源下載，例如圖片。盡管腳本的下載過(guò)程中不會(huì)相互影響，但頁(yè)面仍然要等到所有js代碼下載并完成執(zhí)行才能繼續(xù)。-- 《高性能的js》

并行下載測(cè)試

建議放在body的底部

每個(gè)script標(biāo)簽初始化都會(huì)阻塞頁(yè)面渲染，在解析html頁(yè)面過(guò)程中每遇到一個(gè)script標(biāo)簽都會(huì)因執(zhí)行腳本而導(dǎo)致一定的延時(shí)

盡管單個(gè)較大的js文件只請(qǐng)求一次http，但是這樣會(huì)導(dǎo)致鎖死瀏覽器一段時(shí)間，解決方案除了上面所說(shuō)的defer之外還可以動(dòng)態(tài)創(chuàng)建標(biāo)簽加入head中，可以通過(guò)onload事件來(lái)監(jiān)聽(tīng)腳本加載是否完畢，ie下通過(guò)readystatechange事件

function loadScript(url, callback) {

    var script = document.createElement("script");

    if ( script.readyState ) { // IE

        script.onreadystatechange = function(){

            if( script.readyState == "loaded" || script.readyState == "complete") {

                script.onreadystatechange = null; // 同時(shí)檢查兩種狀態(tài)，只要有一種觸發(fā)就刪除事件處理器，避免觸發(fā)兩次
                callback();
            }

        }

    }else{

        script.onload = function(){
            callback();
        }

    }


    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);

}