[HTML] script tag 屬性 async vs. defer

一般的網頁載入流程如下：

1. 解析 HTML 結構
2. 載入解析外部資源 (stylesheet or js)
3. 執行載入的 script，此時會暫停網頁的渲染，等執行完 script 後，才會繼續網頁的解析及渲染
4. HTML DOM 載入完成 (DomContentLoaded、jQuery 中的 ready())
5. 載入剩下的 stylesheet、image 或 frame
6. 所有資源及頁面載入完成 (load)

而在 HTML5 中，<script> tag 多了 async 和 defer 兩種屬性, 這裡比較一下兩者的差別：

基本 script tag

通常我們在用 script tag 時，會寫成:

<script src="index.js"></script>

這種方式會讓整個網頁的渲染停下，等 index.js 載入並執行後才會繼續渲染。

async 屬性

<script src="index.js" async></script>

加上 async 屬性，網頁的渲染和載入 index.js 會同時進行 (非同步)，載入 index.js 之後就會執行，但無法保證每個 script 的執行順序。
適合用在不需要操作到 DOM 、獨立的 JS file, 不需要等待其他的 JS 執行完，可以獨立作業的。

defer 屬性

<script src="index.js" defer></script>

加上 defer 屬性，網頁的渲染和載入 index.js 會同時進行 (非同步)，但是 index.js 的執行會等網頁渲染及分析完後再執行。
適合用在會操作到 DOM，需要等整個頁面渲染完才能執行的 JS.

參考資料

• script tag 屬性 async defer 差別
• defer和async的区别