script 标签的 defer 和 async 作用

6 阅读1分钟

1. defer(延迟执行)

  • 加载行为异步下载 JS 脚本,不阻塞 HTML 解析
  • 执行时机等整个 HTML 文档完全解析完成后,在 DOMContentLoaded 事件之前执行
  • 执行顺序按照脚本在页面中的书写顺序执行(多个 defer 脚本会排队执行)
  • 适用场景:需要依赖 DOM 元素、多个脚本之间有依赖关系(比如先加载 jQuery,再加载依赖它的插件)

2. async(异步执行)

  • 加载行为异步下载 JS 脚本,不阻塞 HTML 解析
  • 执行时机脚本下载完成后立即执行,执行时会阻塞 HTML 解析
  • 执行顺序谁先下载完谁先执行(无序,不保证书写顺序)
  • 适用场景:独立的第三方脚本(比如广告、统计、谷歌分析),不依赖其他脚本,也不依赖 DOM