1. defer(延迟执行)
- 加载行为:异步下载 JS 脚本,不阻塞 HTML 解析
- 执行时机:等整个 HTML 文档完全解析完成后,在
DOMContentLoaded事件之前执行 - 执行顺序:按照脚本在页面中的书写顺序执行(多个 defer 脚本会排队执行)
- 适用场景:需要依赖 DOM 元素、多个脚本之间有依赖关系(比如先加载 jQuery,再加载依赖它的插件)
2. async(异步执行)
- 加载行为:异步下载 JS 脚本,不阻塞 HTML 解析
- 执行时机:脚本下载完成后立即执行,执行时会阻塞 HTML 解析
- 执行顺序:谁先下载完谁先执行(无序,不保证书写顺序)
- 适用场景:独立的第三方脚本(比如广告、统计、谷歌分析),不依赖其他脚本,也不依赖 DOM