js中defer和async区别

JavaScript 中的 defer 和 async 属性都是用于异步加载外部脚本文件的，但它们之间存在一些关键区别，主要体现在脚本的执行时机和执行顺序上。

一、执行时机

1. defer：

   • 使用 defer 属性的脚本会在 HTML 文档解析完毕后执行。这意味着脚本会在 DOMContentLoaded 事件触发之前执行，但不会阻塞页面的解析。
   • 脚本会按照它们在 HTML 文档中出现的顺序依次执行。

2. async：

   • 使用 async 属性的脚本会在加载完成后立即执行，不保证按照它们在 HTML 文档中出现的顺序执行。
   • 这意味着脚本可能会在 HTML 解析完成之前执行，也可能在解析过程中执行。

二、适用场景

1. defer：

   • 适用于需要操作 DOM 的脚本，因为它保证了脚本执行时 DOM 已经完全加载完成。
   • 由于脚本会按照顺序执行，因此也适用于有依赖关系的脚本。

2. async：

   • 适用于不依赖于其他脚本的独立脚本，例如分析工具或广告脚本。
   • 由于脚本加载完成后会立即执行，因此可以尽快执行这些脚本而不影响页面的解析。

三、其他注意事项

1. document.write 方法：

   • 使用 defer 或 async 属性的脚本中不能使用 document.write 方法。因为当页面加载和解析完成之后，文档流已经关闭，所以无法向页面中写入内容。

2. 浏览器兼容性：

   • defer 属性在 HTML4.0 中就已经定义，因此具有较好的浏览器兼容性。
   • async 属性是 HTML5 中新增的属性，但现代浏览器普遍支持它。

3. 内联脚本：

   • defer 和 async 属性只对外部脚本文件有效，对内联脚本（即直接写在 HTML 文件中的脚本）无效。

四、示例代码

<!-- 使用 defer 属性 -->
<script src="example1.js" defer></script>
<script src="example2.js" defer></script>
<!-- example1.js 和 example2.js 会按照顺序在 HTML 解析完毕后执行 -->

<!-- 使用 async 属性 -->
<script src="example3.js" async></script>
<script src="example4.js" async></script>
<!-- example3.js 和 example4.js 可能会按照任意顺序执行，取决于它们的加载速度 -->

综上所述，defer 和 async 属性在 JavaScript 脚本加载和执行方面各有特点。选择使用哪个属性取决于脚本的具体需求，如是否依赖 DOM、是否有顺序要求等。

本文地址：https://www.tides.cn/p_js-the-diffenrence-of-defer-and-async