script 中 defer 和 async 属性的区别

defer 和 async 是用来优化网页加载性能的 <script> 标签属性，它们可以控制脚本在页面加载过程中的执行时机，以提高网页的交互体验和性能。

1. defer

• defer 属性指示浏览器延迟脚本的执行，直到文档解析完毕后再执行。多个带有 defer 属性的脚本将按照它们在文档中出现的顺序依次执行。
• 特点：
  • 脚本会在 DOMContentLoaded 事件之前执行。
  • 主要用于确保脚本在文档解析完毕后运行，不会阻止文档的解析。
  • 适合用于需要脚本操作 DOM 元素的场景。
• 示例：

  <script src="your-script.js" defer></script>

TIP

​​<script defer> 脚本会在文档解析完成后按照顺序执行，但在 ​DOMContentLoaded​ 事件触发前执行。

2. async

• async 属性指示浏览器立即异步下载脚本，并在下载完成后立即执行脚本，但是不会阻止文档的解析和其他资源的加载。
• 特点：
  • 脚本在下载完成后立即执行，不会阻止后续文档的解析和其他资源的加载。
  • 不保证脚本的执行顺序，哪个先下载完成就先执行。
  • 适合独立、相互不依赖的脚本文件。
• 示例：

  <script src="your-script.js" async></script>

总结：

• 使用 defer 属性可以按照脚本在文档中的顺序，并在 DOM 解析完成后执行脚本，适合脚本之间有依赖关系的情况。
• 使用 async 属性可以异步加载并执行脚本，适合无依赖且独立的脚本文件，以加快整个页面的加载速度。

补充

DOMContentLoaded 事件：

DOMContentLoaded 事件是指整个 HTML 文档被完全加载和解析之后触发的事件。在这时，DOM 已经构建完成，但可能还存在外部资源（如图片、样式表等）正在加载中。

脚本可以通过监听 DOMContentLoaded 事件来确保页面的 DOM 结构已经完整并可以进行操作。例如：

document.addEventListener("DOMContentLoaded", function () {
  // 在 DOMContentLoaded 事件触发后执行的操作
});