大家好! 我希望你一切都好。本文将探讨一个有趣的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解析过程。
下载脚本后，它将异步执行，这意味着它可以随时运行，甚至在HTML文档完成解析之前。
<script src= "example.js" async></script>
如果多个脚本异步加载，无论文档中的订单如何，它们都将在下载后立即执行。当脚本不取决于已满载的DOM或其他脚本时，这将很有用。
Defer
当我们在延期属性中包含一个脚本时，它还告诉浏览器在解析HTML文档时异步下载脚本。
但是，将脚本的执行推迟到解析HTML文档后。
<script src= "example.js" defer></script>
带有延期属性的脚本将按照文档中显示的顺序执行。当脚本依赖于已完全解析的DOM或脚本执行顺序很重要时，这很有用。
结论
异步和递延允许HTML解析过程继续，而无需等待脚本下载。
脚本执行时的区别在于：
使用异步，该脚本在下载后立即执行，可能在HTML文档完全解析之前。使用defer，脚本仅在完全解析HTML文档后才执行 DOMContentLoaded 事件。
要注意的重要事情之一是，我们只有在拥有可以独立运行并不依赖DOM结构的脚本时才使用Async，并且当我们需要维护脚本执行顺序或依赖DOM时，我们会使用defer结构。
希望您喜欢这篇文章！
624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
