script標(biāo)簽中的async和defer詳細(xì)說明與使用場景
script標(biāo)簽用于加載腳本與執(zhí)行腳本，在前端開發(fā)中可以說是非常重要的標(biāo)簽了。
直接使用script腳本的話，html會按照順序來加載并執(zhí)行腳本，在腳本加載&執(zhí)行的過程中，會阻塞后續(xù)的DOM渲染。
現(xiàn)在大家習(xí)慣于在頁面中引用各種的第三方腳本，如果第三方服務(wù)商出現(xiàn)了一些小問題，比如延遲之類的，就會使得頁面白屏。
好在script提供了兩種方式來解決上述問題，async和defer，這兩個屬性使得script都不會阻塞DOM的渲染。
但既然會存在兩個屬性，那么就說明，這兩個屬性之間肯定是有差異的。
defer
如果
script標(biāo)簽設(shè)置了該屬性，則瀏覽器會異步的下載該文件并且不會影響到后續(xù)DOM的渲染；
如果有多個設(shè)置了defer的script標(biāo)簽存在，則會按照順序執(zhí)行所有的script；defer腳本會在文檔渲染完畢后，DOMContentLoaded事件調(diào)用前執(zhí)行。
我們做了一個測試頁面，頁面中包含了兩個script標(biāo)簽的加載，給他們都加上defer標(biāo)識。
P.S. 為了更直觀，我們給script1.js添加了1s的延遲，給script2.js添加了2s的延遲。
下圖是頁面加載的過程&script腳本的輸出順序。
不難看出，雖然script1加載用時雖然比script2短，但因為defer的限制，所以Ta只能等前邊的腳本執(zhí)行完畢后才能執(zhí)行。
async
async的設(shè)置，會使得script腳本異步的加載并在允許的情況下執(zhí)行async的執(zhí)行，并不會按著script在頁面中的順序來執(zhí)行，而是誰先加載完誰執(zhí)行。
我們修改測試頁面如下：
遂得到了如下的結(jié)果，頁面加載時長上，并沒有什么變化，畢竟都是異步加載的腳本。
但是我們可以看到一個小細(xì)節(jié)，DOMContentLoaded事件的觸發(fā)并不受async腳本加載的影響，在腳本加載完之前，就已經(jīng)觸發(fā)了DOMContentLoaded。
我們接著修改測試頁面。加載一個沒有延遲的script腳本，使得腳本可以即時的加載完畢。
我們要測試一下，如果async腳本加載的足夠快，是否會在DOMContentLoaded之前就執(zhí)行（這個實驗是基于對async的描述“在允許的情況下執(zhí)行”的論證）。
同時為了保證測試的穩(wěn)定性，我們在script腳本引入的后邊添加了數(shù)千個空的div節(jié)點，用來延長文檔的渲染時間。
執(zhí)行結(jié)果不出所料，如果給async一定的時間，是有可能在DOMContentLoaded事件之前就執(zhí)行的。
P.S. 從上圖中左上角的火焰圖中，我們也能看到，出現(xiàn)了多段的藍(lán)色（更新：晚上寫的時候懵了，紫色的才是渲染，藍(lán)色的是解析）文檔渲染。以及下邊Console的順序。
說明的確，async的執(zhí)行是加載完成就會去執(zhí)行，而不像defer那樣要等待所有的腳本加載完后按照順序執(zhí)行。
畫幾張圖簡要說明
網(wǎng)上有了不少這種類似的圖，但是基本都是拿一個script就舉例的
未免太過寒酸，so咱們來一個豪華版，來畫一下多個腳本加載時的甘特圖
就像近年來各大手機(jī)廠商，出新機(jī)都喜歡來一個X+X plus
拿四個不同的顏色來標(biāo)明各自代表的含義
更正：文檔渲染 應(yīng)該為 文檔解析
普通script
文檔解析的過程中，如果遇到script腳本，就會停止頁面的解析進(jìn)行下載（但是Chrome會做一個優(yōu)化，如果遇到script腳本，會快速的查看后邊有沒有需要下載其他資源的，如果有的話，會先下載那些資源，然后再進(jìn)行下載script所對應(yīng)的資源，這樣能夠節(jié)省一部分下載的時間 @Update: 2018-08-17）。
資源的下載是在解析過程中進(jìn)行的，雖說script1腳本會很快的加載完畢，但是他前邊的script2并沒有加載&執(zhí)行，所以他只能處于一個掛起的狀態(tài)，等待script2執(zhí)行完畢后再執(zhí)行。
當(dāng)這兩個腳本都執(zhí)行完畢后，才會繼續(xù)解析頁面。
defer
文檔解析時，遇到設(shè)置了defer的腳本，就會在后臺進(jìn)行下載，但是并不會阻止文檔的渲染，當(dāng)頁面解析&渲染完畢后。
會等到所有的defer腳本加載完畢并按照順序執(zhí)行，執(zhí)行完畢后會觸發(fā)DOMContentLoaded事件。
async
async腳本會在加載完畢后執(zhí)行。async腳本的加載不計入DOMContentLoaded事件統(tǒng)計，也就是說下圖兩種情況都是有可能發(fā)生的
推薦的應(yīng)用場景
defer
如果你的腳本代碼依賴于頁面中的DOM元素（文檔是否解析完畢），或者被其他腳本文件依賴。
例：
- 評論框
- 代碼語法高亮
polyfill.js
async
如果你的腳本并不關(guān)心頁面中的DOM元素（文檔是否解析完畢），并且也不會產(chǎn)生其他腳本需要的數(shù)據(jù)。
例：
百度統(tǒng)計
如果不太能確定的話，用defer總是會比async穩(wěn)定。。。
參考資料
測試代碼存放處：https://github.com/Jiasm/research-script-tagclone后執(zhí)行npm start即可運行。
調(diào)試推薦使用chrome無痕模式（這樣才不會在Performance頁簽上看到不相關(guān)的插件數(shù)據(jù)）。
以上就是script標(biāo)簽中的async和defer詳細(xì)說明與使用場景的詳細(xì)內(nèi)容，更多關(guān)于script標(biāo)簽中的async和defer詳細(xì)說明的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于ES6中類（Class）的相關(guān)資料，文中介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
JavaScript實現(xiàn)從數(shù)組中選出和等于固定值的n個數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)從數(shù)組中選出和等于固定值的n個數(shù)的方法,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了小程序簡單兩欄瀑布流效果的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JavaScript實現(xiàn)網(wǎng)頁計算器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)網(wǎng)頁計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
JavaScript高階教程之“==”隱藏下的類型轉(zhuǎn)換
這篇文章主要給大家介紹了關(guān)于JavaScript高階教程之“==”隱藏下類型轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript學(xué)習(xí)筆記之惰性函數(shù)示例詳解
函數(shù)是js世界的一等公民，js的動態(tài)性、易變性在函數(shù)的應(yīng)用上，體現(xiàn)的淋漓盡致。下面這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)筆記之惰性函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-08-08
這篇文章主要介紹了js鼠標(biāo)滑過圖片震動特效的方法,涉及onMouseOver事件及圖片操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
一定有你會用到的JavaScript一行代碼實用技巧總結(jié)
這篇文章主要為大家介紹了一定有你會用到的JavaScript一行代碼總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas畫圖，并實現(xiàn)分享功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
今天小編就為大家分享一篇解決Layui 表單提交數(shù)據(jù)為空的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08