JavaScript 中的 Async 与 Defer：哪个更好？🤔

大家好！希望你们一切顺利。本文将探讨一个有趣的 JavaScript 主题。async和defer是在 HTML 文档中包含外部 JavaScript 文件时使用的属性。它们会影响浏览器加载和执行脚本的方式。让我们来详细了解一下它们。

默认行为

我们通常使用标签将 HTML 页面与外部 JavaScript 连接起来<script>。传统上，JavaScript<script>标签通常放在<head>HTML 文档的部分中。然而，这样做意味着 HTML 的解析会被阻塞，直到 JavaScript 文件被加载并执行，从而导致页面加载时间变慢。现在，我们通常倾向于在页面元素<script>的所有内容都加载完成后再保留标签。<body>



<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 的完全解析，或者脚本执行顺序很重要时，该属性非常有用。

结论

异步和延迟都允许 HTML 解析过程继续，而无需等待脚本下载完成。

区别在于脚本的执行时间：
使用 async 时，脚本会在下载完成后立即执行，可能在 HTML 文档完全解析之前。使用 defer 时，脚本仅在 HTML 文档完全解析之后、DOMContentLoaded事件之前执行。

需要注意的一件重要事情是，只有当我们拥有可以独立运行且不依赖于 DOM 结构的脚本时，我们才应该使用异步，而当我们需要维护脚本执行顺序或依赖于 DOM 结构时，我们才应该使用延迟。

希望你喜欢这篇文章，如果喜欢的话别忘了点赞哦！😃

与我联系-

文章来源：https://dev.to/fidalmathew/async-vs-defer-in-javascript-which-is-better-26gm