JavaScript 中的异步与延迟：哪个更好
大家好！我希望你一切都好。本文将探讨一个有趣的 Javascript 主题。async和defer是在 HTML 文档中包含外部 JavaScript 文件时使用的属性。它们影响浏览器加载和执行脚本的方式。让我们详细了解一下它们。
默认行为
我们通常将 HTML 页面与带有<script>标签的外部 javascript 连接起来。传统上，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 或脚本执行顺序很重要时，它非常有用。
结论
async 和 defer 都允许 HTML 解析过程继续进行，而无需等待脚本下载。
区别在于脚本执行的时间：
使用异步，脚本在下载后立即执行，可能在 HTML 文档完全解析之前执行。使用 defer，脚本仅在 HTML 文档完全解析之后、事件之前执行DOMContentLoaded。
需要注意的重要事项之一是，只有当我们有可以独立运行且不依赖 DOM 结构的脚本时，我们才应该使用 async，而当我们需要维护脚本执行顺序或依赖 DOM 时，我们应该使用 defer结构。
我希望您喜欢这篇文章，如果您喜欢，请不要忘记点赞！😃