JS 异步加载的方式有哪些？

查看详情

• script 标签的 defer 属性
• script 标签的 async 属性
• 动态插入 script 脚本

script 标签的 defer 和 async 属性的区别是什么？

查看详情

• defer 属性
  • 加载：带有 defer 属性的脚本会异步加载，浏览器在解析 HTML 文档的同时会加载脚本。
  • 执行时机：脚本的执行会被推迟到整个 HTML 文档完全解析完毕之后，即 DOM 树完全构建之后，且在 DOMContentLoaded 事件触发之前执行。
  • 执行顺序：如果有多个带 defer 属性的脚本，它们会按照在文档中出现的顺序依次执行。
• async 属性
  • 加载：带有 async 属性的脚本同样会异步加载，浏览器在解析 HTML 文档的同时会加载脚本。
  • 执行时机：一旦脚本加载完成，浏览器会立即执行它，不会等待 HTML 文档的解析完成。
  • 执行顺序：如果有多个带 async 属性的脚本，它们的执行顺序无法保证，取决于各个脚本加载完成的顺序。
• 使用场景
  • defer 适用于需要确保脚本在 DOM 完全构建之后执行的情况，通常用于依赖 DOM 结构的脚本。
  • async 适用于独立的脚本，比如分析或广告脚本，这些脚本不依赖于 DOM 结构或其他脚本的执行顺序。