僅需 10 秒，三張圖讓你瞭解 async 和 defer 的區別

原文：https://dev.to/fidalmathew/async-vs-defer-in-javascript-which-is-better-26gm
作者：Fidal Mathew
譯者：ChatGPT 4 Turbo

大家好！希望你們一切安好。這篇文章將探討一個有趣的 Javascript 話題。async 和 defer 是在 HTML 文檔中包含外部 JavaScript 文件時使用的屬性。它們影響瀏覽器加載和執行腳本的方式。讓我們詳細瞭解它們。

默認行爲

我們通常使用 <script> 標籤將 HTML 頁面與外部 javascript 連接。傳統上，JavaScript 的 <script> 標籤經常放置在 HTML 文檔的 <head> 部分。然而，這樣做意味着在獲取並執行 JavaScript 文件之前，HTML 的解析會被阻塞，導致頁面加載時間變長。如今，我們大多更傾向於把 <script> 標籤放在 <body> 元素的所有內容加載完之後。

<script src="example.js"></script>

這裏是 HTML 解析和腳本執行的過程。

Async

當我們使用 async 屬性包含腳本時，它告訴瀏覽器在解析 HTML 文檔的同時異步下載腳本。腳本在後臺下載，不會阻塞 HTML 解析過程。

一旦腳本下載完成，它會被異步執行，這意味着它可以在任何時候運行，甚至在 HTML 文檔解析完成之前。

<script src="example.js" async></script>

如果多個腳本被設置爲異步加載，它們會在下載完畢後立即執行，而不考慮它們在文檔中的順序。這在腳本不依賴於 DOM 完全加載或其他腳本時非常有用。

Defer

當我們使用帶有 defer 屬性的腳本標籤時，它也會告訴瀏覽器在解析 HTML 文檔的同時異步下載腳本。然而，腳本的執行會被推遲到 HTML 文檔解析完成之後。

<script src="example.js" defer></script>

帶有 defer 屬性的腳本會按照它們在文檔中出現的順序執行。當腳本依賴於 DOM 完全解析完成或者腳本執行順序很重要時，這種方式非常有用。

結論

無論是 async 還是 defer 屬性，都允許 HTML 解析過程在不等待腳本下載的情況下繼續進行。

兩者的區別在於腳本執行的時機：使用 async 屬性，腳本會在下載完馬上執行，可能會在 HTML 文檔完全解析之前。而使用 defer 屬性，腳本只會在 HTML 文檔完全解析之後、DOMContentLoaded 事件之前執行。

需要注意的一點是，我們應當僅在腳本可以獨立運行且不依賴於 DOM 結構時使用 async，而在需要保持腳本執行順序或依賴於 DOM 結構時使用 defer。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/g7xiL_G0dV2P3H3xax2AAA

猜你喜歡