async vs. defer | Advance Web Development Quiz | #1

此文章是 FrontendMaster 課程的筆記

問題：以下的 <script> 中的程式碼執行順序為何？

答案在最下面

<script async src="async1.js"/> // 300ms
<script defer src="defer1.js"/> // 200ms
<script defer src="defer2.js"/> // 300ms
<script async src="async2.js"/> // 50ms
<script async defer src="asyncdefer1.js"/> // 60ms

先來說明 async 與 defer 差別是？

1. 一般的 script 標籤 <script src="...">

1. 解析 HTML
2. 若讀取到 script 檔，會請求該檔案內容，並等待下載完成
3. 接續執行第二步的程式碼
4. 繼續解析後續的 HTML 內容。

會阻擋 HTML 的解析，而且執行 JS 程式碼的時候 HTML 必定尚未解析完畢

2. async <script async src="...">

1. 解析 HTML
2. 讀取到 script 時，會開始下載該 JS 檔，於此同時，解析 HTML 仍會持續進行不停止
3. 當第二步的 JS 檔下載完成的那一刻，會停止解析 HTML 並立刻執行 JS 的程式碼
4. 程式碼執行完成後，才會繼續解析未完成的 HTML 內容

仍然無法保證 JS 執行程式碼的時候已經是否已經把 HTML 解析完畢 適合不在意 HTML 是否讀取完畢的情境，例如：Google Analytics 的 JS 檔

3. defer <script defer src="...">

解析 HTML 時若遇到 script 會開始下載該 JS 檔，於此同時解析 HTML 仍會持續進行不停止，一直到 HTML 解析「完畢」後，才會立刻執行 JS 的程式碼。

可以確定執行 JS 的程式碼時，HTML 必定解析完畢 適合需要確保程式碼執行的時候，HTML 已經解析完畢的情況

4. defer + async !? <script async defer src="...">

如果兩個屬性都加上去了就會以 async 為主，除非瀏覽器不支援 async 才會變成 defer 的模式（不過應該不太可能有不支援的情況（對吧？？））

答案：

<script async src="async2.js"/> // 50ms
<script async defer src="asyncdefer1.js"/> // 60ms
<script async src="async1.js"/> // 300ms
<script defer src="defer1.js"/> // 200ms
<script defer src="defer2.js"/> // 300ms

最近訂閱了 FrontendMaster 準備爆看課程，順便重新回來寫部落格當作筆記啦