請說明 <script> 的 async 與 defer 有什麼不同

背景：為何需要 async / defer？

當瀏覽器解析 HTML 遇到 <script> 時，預設會暫停 HTML 解析，等 JS 下載並執行完後才繼續，容易造成頁面載入緩慢。async 和 defer 都能讓 JS 異步下載，但執行時機不同。

三種載入方式比較

<!-- 一般（阻塞） -->
<script src="app.js"></script>

<!-- async -->
<script src="app.js" async></script>

<!-- defer -->
<script src="app.js" defer></script>

執行時機示意

一般：   HTML parsing ----[暫停]---- [下載+執行JS] ---- 繼續 HTML
async：  HTML parsing ==並行下載== [執行JS（立即）] ---- 繼續 HTML
defer：  HTML parsing ==並行下載== ---- HTML 完成 ---- [執行JS]

主要差異

屬性	下載時機	執行時機	保證執行順序
無	阻塞，立即下載	下載後立即執行	✅
async	與 HTML 並行	下載完成後立即執行	❌
defer	與 HTML 並行	HTML 解析完成後，按順序執行	✅

使用建議

• defer：適合大多數情況，尤其是需要操作 DOM 或依賴其他腳本的 JS
• async：適合獨立、不依賴 DOM 或其他腳本的資源（如 Google Analytics）
• 無屬性：避免使用，除非腳本需要立即執行且不在乎阻塞