大家好!我希望你一切都好。本文将探讨一个有趣的 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结构。
我希望您喜欢这篇文章,如果您喜欢,请不要忘记点赞!😃
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=5vbhp91f157x
请登录后查看评论内容