大家好！我希望你一切都好。本文將探討一個有趣的 Javascript 主題。 async和defer是在 HTML 文件中包含外部 JavaScript 檔案時使用的屬性。它們會影響瀏覽器載入和執行腳本的方式。讓我們詳細了解一下它們。
預設行為
我們通常使用<script>標籤將 HTML 頁面與外部 javascript 連接。傳統上，JavaScript <script>標籤通常放置在 HTML 文件的<head>部分。然而，這樣做意味著 HTML 的解析會被阻止，直到 JavaScript 檔案被取得並執行為止，導致頁面載入時間變慢。如今，我們更喜歡在頁面的<body>元素的所有內容首先加載之後保留<script>標記。
<script src="example.js"></script>HTML 解析和腳本執行的過程如下
非同步
當我們包含具有 async 屬性的腳本時，它會告訴瀏覽器在解析 HTML 文件時非同步下載腳本。腳本在背景下載，不會阻塞 HTML 解析過程。
下載腳本後，它會非同步執行，這意味著它可以隨時執行，甚至在 HTML 文件完成解析之前也可以執行。
<script src="example.js" async></script>如果非同步載入多個腳本，它們將在下載完成後立即執行，無論它們在文件中的順序如何。當腳本不依賴完全載入的 DOM 或其他腳本時，它非常有用。
延遲
當我們包含具有 defer 屬性的腳本時，它也會告訴瀏覽器在解析 HTML 文件時非同步下載腳本。
然而，腳本的執行被推遲到 HTML 文件被解析之後。
<script src="example.js" defer></script>具有 defer 屬性的腳本將按照它們在文件中出現的順序執行。當腳本依賴完全解析的 DOM 或腳本執行順序很重要時，它非常有用。
結論
async 和 defer 都允許 HTML 解析過程繼續進行，而無需等待腳本下載。
差別在於腳本執行的時間：
使用非同步，腳本在下載後立即執行，可能在 HTML 文件完全解析之前執行。使用 defer，腳本僅在 HTML 文件完全解析之後、 DOMContentLoaded事件之前執行。
需要注意的重要事項之一是，只有當我們有可以獨立執行且不依賴 DOM 結構的腳本時，我們才應該使用 async，而當我們需要維護腳本執行順序或依賴 DOM 時，我們應該使用 defer結構。
我希望您喜歡這篇文章，如果您喜歡，請不要忘記按讚！ 😃
與我聯絡-
原文出處：https://dev.to/fidalmathew/async-vs-defer-in-javascript-which-is-better-26gm
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式