# [HTML5] script Tag 新增的屬性：async, defer 差異
# 非同步正夯
https://www.udemy.com/the-complete-junior-to-senior-web-developer-roadmap/
最近才得知 HTML5 中對於 script Tag 新增了 async , defer 兩個屬性。
大略查了一下差異，很容易就清楚了。
如上圖所示，差異如下：
一般的 script 寫法，整個網頁會 被暫停 ， 直到 test.js 下載並執行完 ，網頁載入才繼續。
<script src="test.js" ></script>
使用 defer ，網頁載入 不會停下 ， test.js 會在背景下載 ，直到 DOMContentLoaded 再執行 test.js 。
<script src="test.js" defer ></script>
使用 async ， 網頁繪製不會停下 ， test.js 在背景下載 。 下載後會先執行 ，並且 html 可以繼續載入 。
<script src="test.js" async ></script>
使用 async+defer ， 網頁繪製不會停下來 ， test.js 會在背景下載 ， 但是不會馬上執行 。要直到整個頁面載入，才會非同步的執行 test.js。
<script async defer src="test.js"></script>
# 使用時機
async 與 defer 在載入的行為是沒有差異的，都是非同步處理。
唯一要注意的是 async 的使用。
因為 async 的特性 — 加載結束後馬上執行 。
若是使用於有 dependence 的狀況，可能會有預期以外的狀況發生。
我的話，會使用在與 html 沒有太多關聯性、互不影響的情況來加速頁面的載入與執行。
例如：單獨的背景運算、google analysis、或是其他無關 html 的前處理。
