大家好！我希望你一切都好。本文将探讨一个有趣的 Javascript 主题。async和defer是在 HTML 文档中包含外部 JavaScript 文件时使用的属性。它们影响浏览器加载和执行脚本的方式。让我们详细了解一下它们。
默认行为
我们通常将 HTML 页面与带有<script>标签的外部 javascript 连接起来。传统上，JavaScript <script>标签通常放置在<head>HTML 文档的部分中。然而，这样做意味着 HTML 的解析会被阻止，直到 JavaScript 文件被获取并执行为止，从而导致页面加载时间变慢。如今，我们更喜欢在页面元素<script>的所有内容首先加载之后保留标签。<body>
<script src="example.js"></script>
HTML 解析和脚本执行的过程如下
![图片[1]-JavaScript 中的异步与延迟：哪个更好-哈德森博客](https://www.hudbs.com/wp-content/uploads/2024/03/5d433e37c020240302155938.png)
异步
当我们包含带有 async 属性的脚本时，它会告诉浏览器在解析 HTML 文档时异步下载脚本。该脚本在后台下载，不会阻塞 HTML 解析过程。
下载脚本后，它会异步执行，这意味着它可以随时运行，甚至在 HTML 文档完成解析之前也可以运行。
<script src="example.js" async></script>
如果异步加载多个脚本，它们将在下载完成后立即执行，无论它们在文档中的顺序如何。当脚本不依赖于完全加载的 DOM 或其他脚本时，它非常有用。
![图片[2]-JavaScript 中的异步与延迟：哪个更好-哈德森博客](https://www.hudbs.com/wp-content/uploads/2024/03/fe60ca60a020240302155937.png)
延迟
当我们包含带有 defer 属性的脚本时，它还会告诉浏览器在解析 HTML 文档时异步下载脚本。
然而，脚本的执行被推迟到 HTML 文档被解析之后。
<script src="example.js" defer></script>
具有 defer 属性的脚本将按照它们在文档中出现的顺序执行。当脚本依赖于完全解析的 DOM 或脚本执行顺序很重要时，它非常有用。
![图片[3]-JavaScript 中的异步与延迟：哪个更好-哈德森博客](https://www.hudbs.com/wp-content/uploads/2024/03/36191f373920240302160025.png)
结论
async 和 defer 都允许 HTML 解析过程继续进行，而无需等待脚本下载。
区别在于脚本执行的时间：
使用异步，脚本在下载后立即执行，可能在 HTML 文档完全解析之前执行。使用 defer，脚本仅在 HTML 文档完全解析之后、事件之前执行DOMContentLoaded。
需要注意的重要事项之一是，只有当我们有可以独立运行且不依赖 DOM 结构的脚本时，我们才应该使用 async，而当我们需要维护脚本执行顺序或依赖 DOM 时，我们应该使用 defer结构。
我希望您喜欢这篇文章，如果您喜欢，请不要忘记点赞！😃
我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=5vbhp91f157x
暂无评论内容