script 标签中 defer 和 async 的区别

script 标签中 defer 和 async 的区别

1. defer：

   • <script defer> 声明的脚本会在 HTML 解析完成后，DOMContentLoaded 事件触发前执行。
   • 多个带有 defer 属性的脚本会按照它们在 HTML 中出现的顺序顺序执行。
   • defer 脚本会在页面的 load 事件之前执行。

2. async：

   • <script async> 声明的脚本会在加载完成后立即执行，同时不会阻止 HTML 解析。
   • 如果有多个 async 脚本，它们会在加载完成后立即开始执行，互不依赖，执行顺序不确定。
   • async 脚本可能在页面的 load 事件之前或之后执行，取决于加载完成的时间。

总结：

• 使用 defer 可以确保脚本在 DOMContentLoaded 事件触发前执行，适用于需要保证脚本按照顺序执行，并且要在 DOMContentLoaded 事件触发前执行的情况。
• 使用 async 则适用于独立的脚本，不需要等待其他脚本加载完成，也不需要等待 DOMContentLoaded 事件触发，可以尽快执行。