script標(biāo)簽用于加載腳本與執(zhí)行腳本，在前端開(kāi)發(fā)中可以說(shuō)是非常重要的標(biāo)簽了。
直接使用script腳本的話，html會(huì)按照順序來(lái)加載并執(zhí)行腳本，在腳本加載&執(zhí)行的過(guò)程中，會(huì)阻塞后續(xù)的DOM渲染。

現(xiàn)在大家習(xí)慣于在頁(yè)面中引用各種的第三方腳本，如果第三方服務(wù)商出現(xiàn)了一些小問(wèn)題，比如延遲之類(lèi)的，就會(huì)使得頁(yè)面白屏。
好在script提供了兩種方式來(lái)解決上述問(wèn)題，async和defer，這兩個(gè)屬性使得script都不會(huì)阻塞DOM的渲染。
但既然會(huì)存在兩個(gè)屬性，那么就說(shuō)明，這兩個(gè)屬性之間肯定是有差異的。

defer

如果script標(biāo)簽設(shè)置了該屬性，則瀏覽器會(huì)異步的下載該文件并且不會(huì)影響到后續(xù)DOM的渲染；
如果有多個(gè)設(shè)置了defer的script標(biāo)簽存在，則會(huì)按照順序執(zhí)行所有的script；
defer腳本會(huì)在文檔渲染完畢后，DOMContentLoaded事件調(diào)用前執(zhí)行。

我們做了一個(gè)測(cè)試頁(yè)面，頁(yè)面中包含了兩個(gè)script標(biāo)簽的加載，給他們都加上defer標(biāo)識(shí)。
P.S. 為了更直觀，我們給script1.js添加了1s的延遲，給script2.js添加了2s的延遲。

下圖是頁(yè)面加載的過(guò)程&script腳本的輸出順序。
不難看出，雖然script1加載用時(shí)雖然比script2短，但因?yàn)?code>defer的限制，所以Ta只能等前邊的腳本執(zhí)行完畢后才能執(zhí)行。

async

async的設(shè)置，會(huì)使得script腳本異步的加載并在允許的情況下執(zhí)行
async的執(zhí)行，并不會(huì)按著script在頁(yè)面中的順序來(lái)執(zhí)行，而是誰(shuí)先加載完誰(shuí)執(zhí)行。

我們修改測(cè)試頁(yè)面如下：

遂得到了如下的結(jié)果，頁(yè)面加載時(shí)長(zhǎng)上，并沒(méi)有什么變化，畢竟都是異步加載的腳本。
但是我們可以看到一個(gè)小細(xì)節(jié)，DOMContentLoaded事件的觸發(fā)并不受async腳本加載的影響，在腳本加載完之前，就已經(jīng)觸發(fā)了DOMContentLoaded。

我們接著修改測(cè)試頁(yè)面。加載一個(gè)沒(méi)有延遲的script腳本，使得腳本可以即時(shí)的加載完畢。
我們要測(cè)試一下，如果async腳本加載的足夠快，是否會(huì)在DOMContentLoaded之前就執(zhí)行（這個(gè)實(shí)驗(yàn)是基于對(duì)async的描述“在允許的情況下執(zhí)行”的論證）。
同時(shí)為了保證測(cè)試的穩(wěn)定性，我們?cè)?code>script腳本引入的后邊添加了數(shù)千個(gè)空的div節(jié)點(diǎn)，用來(lái)延長(zhǎng)文檔的渲染時(shí)間。

執(zhí)行結(jié)果不出所料，如果給async一定的時(shí)間，是有可能在DOMContentLoaded事件之前就執(zhí)行的。

P.S. 從上圖中左上角的火焰圖中，我們也能看到，出現(xiàn)了多段的藍(lán)色（更新：晚上寫(xiě)的時(shí)候懵了，紫色的才是渲染，藍(lán)色的是解析）文檔渲染。以及下邊Console的順序。
說(shuō)明的確，async的執(zhí)行是加載完成就會(huì)去執(zhí)行，而不像defer那樣要等待所有的腳本加載完后按照順序執(zhí)行。

畫(huà)幾張圖簡(jiǎn)要說(shuō)明

網(wǎng)上有了不少這種類(lèi)似的圖，但是基本都是拿一個(gè)script就舉例的
未免太過(guò)寒酸，so咱們來(lái)一個(gè)豪華版，來(lái)畫(huà)一下多個(gè)腳本加載時(shí)的甘特圖
就像近年來(lái)各大手機(jī)廠商，出新機(jī)都喜歡來(lái)一個(gè)X+X plus

拿四個(gè)不同的顏色來(lái)標(biāo)明各自代表的含義

更正：文檔渲染 應(yīng)該為 文檔解析

普通script

文檔解析的過(guò)程中，如果遇到script腳本，就會(huì)停止頁(yè)面的解析進(jìn)行下載（但是Chrome會(huì)做一個(gè)優(yōu)化，如果遇到script腳本，會(huì)快速的查看后邊有沒(méi)有需要下載其他資源的，如果有的話，會(huì)先下載那些資源，然后再進(jìn)行下載script所對(duì)應(yīng)的資源，這樣能夠節(jié)省一部分下載的時(shí)間 @Update: 2018-08-17）。
資源的下載是在解析過(guò)程中進(jìn)行的，雖說(shuō)script1腳本會(huì)很快的加載完畢，但是他前邊的script2并沒(méi)有加載&執(zhí)行，所以他只能處于一個(gè)掛起的狀態(tài)，等待script2執(zhí)行完畢后再執(zhí)行。
當(dāng)這兩個(gè)腳本都執(zhí)行完畢后，才會(huì)繼續(xù)解析頁(yè)面。

defer

文檔解析時(shí)，遇到設(shè)置了defer的腳本，就會(huì)在后臺(tái)進(jìn)行下載，但是并不會(huì)阻止文檔的渲染，當(dāng)頁(yè)面解析&渲染完畢后。
會(huì)等到所有的defer腳本加載完畢并按照順序執(zhí)行，執(zhí)行完畢后會(huì)觸發(fā)DOMContentLoaded事件。

async

async腳本會(huì)在加載完畢后執(zhí)行。
async腳本的加載不計(jì)入DOMContentLoaded事件統(tǒng)計(jì)，也就是說(shuō)下圖兩種情況都是有可能發(fā)生的

推薦的應(yīng)用場(chǎng)景

defer

如果你的腳本代碼依賴(lài)于頁(yè)面中的DOM元素（文檔是否解析完畢），或者被其他腳本文件依賴(lài)。

例：

• 評(píng)論框
• 代碼語(yǔ)法高亮
• polyfill.js

async

如果你的腳本并不關(guān)心頁(yè)面中的DOM元素（文檔是否解析完畢），并且也不會(huì)產(chǎn)生其他腳本需要的數(shù)據(jù)。

例：

百度統(tǒng)計(jì)

如果不太能確定的話，用defer總是會(huì)比async穩(wěn)定。。。

參考資料

• https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script

測(cè)試代碼存放處：https://github.com/Jiasm/research-script-tagclone后執(zhí)行npm start即可運(yùn)行。
調(diào)試推薦使用chrome無(wú)痕模式（這樣才不會(huì)在Performance頁(yè)簽上看到不相關(guān)的插件數(shù)據(jù)）。

以上就是script標(biāo)簽中的async和defer詳細(xì)說(shuō)明與使用場(chǎng)景的詳細(xì)內(nèi)容，更多關(guān)于script標(biāo)簽中的async和defer詳細(xì)說(shuō)明的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論