了解异步和延迟

王林原创: 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

上一篇：Understanding Package Managers: pnpm vs npm vs yarn下一篇：How To Add Google Tag Manager Code in a React Website

查看更多