淺談script標籤中的async和defer

原文鏈接:https://blog.csdn.net/WuLex

script標籤用於加載腳本與執行腳本,在前端開發中可以說是非常重要的標籤了。
直接使用script腳本的話,html會按照順序來加載並執行腳本,在腳本加載&執行的過程中,會阻塞後續的DOM渲染。

現在大家習慣於在頁面中引用各種的第三方腳本,如果第三方服務商出現了一些小問題,比如延遲之類的,就會使得頁面白屏。
好在script提供了兩種方式來解決上述問題,asyncdefer,這兩個屬性使得script都不會阻塞DOM的渲染。
但既然會存在兩個屬性,那麼就說明,這兩個屬性之間肯定是有差異的。

defer

如果script標籤設置了該屬性,則瀏覽器會異步的下載該文件並且不會影響到後續DOM的渲染;
如果有多個設置了deferscript標籤存在,則會按照順序執行所有的script
defer腳本會在文檔渲染完畢後,DOMContentLoaded事件調用前執行。

我們做了一個測試頁面,頁面中包含了兩個script標籤的加載,給他們都加上defer標識。
P.S. 爲了更直觀,我們給script1.js添加了1s的延遲,給script2.js添加了2s的延遲。
image下圖是頁面加載的過程&script腳本的輸出順序。
不難看出,雖然script1加載用時雖然比script2短,但因爲defer的限制,所以Ta只能等前邊的腳本執行完畢後才能執行。
image
image

async

async的設置,會使得script腳本異步的加載並在允許的情況下執行
async的執行,並不會按着script在頁面中的順序來執行,而是誰先加載完誰執行。

我們修改測試頁面如下:
image
遂得到了如下的結果,頁面加載時長上,並沒有什麼變化,畢竟都是異步加載的腳本。
但是我們可以看到一個小細節,DOMContentLoaded事件的觸發並不受async腳本加載的影響,在腳本加載完之前,就已經觸發了DOMContentLoaded
image
image
image
image我們接着修改測試頁面。加載一個沒有延遲的script腳本,使得腳本可以即時的加載完畢。
我們要測試一下,如果async腳本加載的足夠快,是否會在DOMContentLoaded之前就執行(這個實驗是基於對async的描述“在允許的情況下執行”的論證)。
同時爲了保證測試的穩定性,我們在script腳本引入的後邊添加了數千個空的div節點,用來延長文檔的渲染時間。
image
執行結果不出所料,如果給async一定的時間,是有可能在DOMContentLoaded事件之前就執行的。
image
P.S. 從上圖中左上角的火焰圖中,我們也能看到,出現了多段的藍色(更新:晚上寫的時候懵了,紫色的纔是渲染,藍色的是解析)文檔渲染。以及下邊Console的順序。
說明的確,async的執行是加載完成就會去執行,而不像defer那樣要等待所有的腳本加載完後按照順序執行。

畫幾張圖簡要說明

網上有了不少這種類似的圖,但是基本都是拿一個script就舉例的
未免太過寒酸,so咱們來一個豪華版,來畫一下多個腳本加載時的甘特圖
就像近年來各大手機廠商,出新機都喜歡來一個X+X plus

拿四個不同的顏色來標明各自代表的含義

更正:文檔渲染 應該爲 文檔解析
image

普通script

文檔解析的過程中,如果遇到script腳本,就會停止頁面的解析進行下載(但是Chrome會做一個優化,如果遇到script腳本,會快速的查看後邊有沒有需要下載其他資源的,如果有的話,會先下載那些資源,然後再進行下載script所對應的資源,這樣能夠節省一部分下載的時間 @Update: 2018-08-17)。
資源的下載是在解析過程中進行的,雖說script1腳本會很快的加載完畢,但是他前邊的script2並沒有加載&執行,所以他只能處於一個掛起的狀態,等待script2執行完畢後再執行。
當這兩個腳本都執行完畢後,纔會繼續解析頁面。
image

defer

文檔解析時,遇到設置了defer的腳本,就會在後臺進行下載,但是並不會阻止文檔的渲染,當頁面解析&渲染完畢後。
會等到所有的defer腳本加載完畢並按照順序執行,執行完畢後會觸發DOMContentLoaded事件。
image

async

async腳本會在加載完畢後執行。
async腳本的加載不計入DOMContentLoaded事件統計,也就是說下圖兩種情況都是有可能發生的

image
image

推薦的應用場景

defer

如果你的腳本代碼依賴於頁面中的DOM元素(文檔是否解析完畢),或者被其他腳本文件依賴。
例:

  1. 評論框
  2. 代碼語法高亮
  3. polyfill.js

async

如果你的腳本並不關心頁面中的DOM元素(文檔是否解析完畢),並且也不會產生其他腳本需要的數據。
例:

  1. 百度統計

如果不太能確定的話,用defer總是會比async穩定。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章