script tag 屬性 async defer 差別
於必須配合 src attribute 之下的 <script> tag，將有兩種屬性四種情況可用。
一、無指定
<script src="demo.js" ></script>
當讀到demo.js區段時，整個網頁的繪製會先中斷，等待 demo.js 下載(script fetch)完並執行(script execution)完畢後，網頁繪製才繼續。
二、defer 屬性
<script src="demo.js" defer ></script>
當讀到demo.js區段時，網頁繪製不會停下， 並且 demo.js 也在背景下載，
待 DOMContentLoaded 也就是網頁繪製全做完後，再來執行 demo.js 。
三、async 屬性
<script src="demo.js" async ></script>
當讀到demo.js區段時，網頁繪製不會停下，並且 demo.js 在背景下載；
待 demo.js 下載完畢，網頁繪製停下，開始執行 demo.js；
待 demo.js 執行完畢，網頁繪製繼續。
四、async + defer 屬性
<script src="demo.js" defer async></script>
當讀到demo.js區段時，網頁繪製不會停下， 並且 demo.js 也在背景下載，
待 DOMContentLoaded 也就是網頁繪製全做完後，再來以非同步執行執行 demo.js 。
時序圖
photo by Karan Sharma
參考資料：
Page lifecycle: DOMContentLoaded, load, beforeunload, unload