了解非同步和延遲

王林原創: 2024-08-09 01:58:42820瀏覽

Understanding async and defer

這是流行的前端面試問題之一。它測試受訪者對 HTML、JS 和效能的了解。

這是前端面試問題系列的第 1 個問題。如果您希望提高準備程度或保持最新狀態，請考慮註冊 FrontendCamp。

script 標籤用於將 JavaScript 新增至 HTML 頁面。它可以是內聯腳本或外部腳本。

<body>
  <!-- Some code before it -->

  <script>
    console.log("This is an inline script.");
  </script>

  <script src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

在解析 HTML 時，如果瀏覽器遇到 script 標籤，它將停止 HTML 解析並開始執行 JS 腳本。如果它是內聯的，它將立即開始執行，但如果它是外部腳本，它將下載然後執行。

在此期間，當JS腳本正在下載並執行時，HTML解析被阻塞。只有瀏覽器執行完 JS 腳本後才能恢復。

你看出這裡出了什麼問題嗎？這將為最終用戶帶來效能問題。如果我們有很多腳本或某個腳本需要很長時間來執行，使用者將很長時間看不到頁面的內容。

為了解決這個問題，我們有兩個屬性：async 和 defer。

非同步

如果存在 async 屬性，則腳本將在解析 HTML 的同時並行下載，並在可用時立即執行。

如果多個腳本使用 async 屬性，執行順序可能與它們在 HTML 中出現的順序不同。最先可用的腳本將首先執行。

<body>
  <!-- Some code before it -->

  <script async src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

延遲

如果存在 defer 屬性，腳本將與 HTML 解析並行下載（就像非同步一樣），但在 HTML 解析完成後、觸發 DOMContentLoaded 之前執行。

如果多個腳本使用 defer 屬性，執行順序將保持不變，與 async 不同。

<body>
  <!-- Some code before it -->

  <script defer src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

概括

非同步和延遲下載腳本都不會阻止 HTML 解析。
非同步腳本將在可用時立即執行。它可能會阻止 HTML 解析。
defer 腳本只會在 HTML 解析完成後、觸發 DOMContentLoaded 之前執行。
如果執行順序無關緊要且腳本不修改 DOM，請使用非同步。
如果執行順序很重要或腳本修改了 DOM，請使用 defer。
另請注意，這些屬性不適用於內嵌腳本，即沒有 src 屬性的腳本。
如果同時新增了 async 和 defer，則 async 優先。

資源

MDN：腳本元素
前端營地

以上是了解非同步和延遲的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html if for while Attribute JS dom this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：了解套件管理器：pnpm、npm、yarn下一篇：了解套件管理器：pnpm、npm、yarn

看更多