JavaScript 中的异步与延迟:哪个更好

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

默认行为

我们通常将 HTML 页面与带有<script>标签的外部 javascript 连接起来。传统上,JavaScript <script>标签通常放置在<head>HTML 文档的部分中。然而,这样做意味着 HTML 的解析会被阻止,直到 JavaScript 文件被获取并执行为止,从而导致页面加载时间变慢。如今,我们更喜欢在页面元素<script>的所有内容首先加载之后保留标签。<body>

<script src="example.js"></script>

HTML 解析和脚本执行的过程如下

图片[1]-JavaScript 中的异步与延迟:哪个更好-哈德森博客

异步

当我们包含带有 async 属性的脚本时,它会告诉浏览器在解析 HTML 文档时异步下载脚本。该脚本在后台下载,不会阻塞 HTML 解析过程。

下载脚本后,它会异步执行,这意味着它可以随时运行,甚至在 HTML 文档完成解析之前也可以运行。

<script src="example.js" async></script>

如果异步加载多个脚本,它们将在下载完成后立即执行,无论它们在文档中的顺序如何。当脚本不依赖于完全加载的 DOM 或其他脚本时,它非常有用。

图片[2]-JavaScript 中的异步与延迟:哪个更好-哈德森博客

延迟

当我们包含带有 defer 属性的脚本时,它还会告诉浏览器在解析 HTML 文档时异步下载脚本。
然而,脚本的执行被推迟到 HTML 文档被解析之后。

<script src="example.js" defer></script>

具有 defer 属性的脚本将按照它们在文档中出现的顺序执行。当脚本依赖于完全解析的 DOM 或脚本执行顺序很重要时,它非常有用。

图片[3]-JavaScript 中的异步与延迟:哪个更好-哈德森博客

结论

async 和 defer 都允许 HTML 解析过程继续进行,而无需等待脚本下载。

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

需要注意的重要事项之一是,只有当我们有可以独立运行且不依赖 DOM 结构的脚本时,我们才应该使用 async,而当我们需要维护脚本执行顺序或依赖 DOM 时,我们应该使用 defer结构。

我希望您喜欢这篇文章,如果您喜欢,请不要忘记点赞!😃

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=5vbhp91f157x
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容