前端三十｜02. [HTML] script tag 加上 async & defer 的功能及差異？
前端當然要從 HTML 出發，今天就讓我們來聊聊 script tag 加上 async / defer 的功能及差異。
本系列文已經重新編校彙整編輯成冊，並正式出版囉！
《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！
喜歡我文章內容的讀者們，歡迎您前往購買支持！
講古
我們知道，瀏覽器解析 HTML 是一行一行依序向下讀取，在傳統的寫法中，當瀏覽器讀到 <script> 時，便會 暫停解析 DOM，而是立刻開始下載 <script> 的資源，並在下載後立刻執行。由於這樣的特性，便可能造成 DOM 樹建構不完全時就執行 JavaScript，需要操作 DOM 的程式可能就因此無法正確運作，造成許多衍伸的問題；或是由於 <script> 中的資源下載、執行時間過程，使用者便會卡在白畫面，並產生覺得網站太慢不好用之類的感受。
而那時的解決方法也很簡單直白，開發者需要把 <script> 的位置都放到 <body> 的最後一行來避免 DOM 樹不完全的問題，但在複雜的網站中，HTML、JavaScript 的檔案都來越大，需要等到整個 DOM 樹都載入完成才開始下載 <script> 內的資源，網站讀取完成到可操作，便會有明顯的延遲感。
這樣的問題該怎麼解決呢？
簡介
從 HTML4 開始，<script> 便多了 defer 屬性，HTML5 則多了 async，兩者皆是用來幫助開發者控制 <script> 內資源的載入及執行順序，以及避免 DOM 的解析被資源下載卡住。
defer
defer 意旨為 延遲（Deferred），在 HTML4.01 的規格 中定義了：
When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no “document.write” in javascript) and thus, the user agent can continue…
