#### 文章目录 * [\元素中的 defer 和 async 属性详解](# ``` * 浏览器遇到这个脚本时会暂停HTML解析 * 下载并执行脚本 * 执行完成后才继续解析HTML #### defer 属性 ```html ``` * **异步下载**：不阻塞HTML解析，脚本在后台下载 * **延迟执行**：脚本会在HTML文档完全解析后，DOMContentLoaded事件触发前执行 * **保持顺序**：多个defer脚本会按照它们在文档中出现的顺序执行 #### async 属性 ```html ``` * **异步下载**：不阻塞HTML解析，脚本在后台下载 * **立即执行**：脚本一旦下载完成就立即执行（可能会中断HTML解析） * **不保证顺序**：多个async脚本不能保证执行顺序，先下载完成的先执行 ### 对比表格 | 特性 | 无属性 | defer | async | |----------|-----------|----------|--------------| | 阻塞HTML解析 | 是 | 否 | 否 | | 执行时机 | 立即 | DOM解析完成后 | 下载完成后立即 | | 执行顺序 | 顺序 | 顺序 | 不确定 | | 适合场景 | 必须立即执行的脚本 | 依赖DOM的脚本 | 独立模块，不依赖其他脚本 | ### 使用场景建议 1. **使用 defer**： * 脚本需要访问完整的DOM * 脚本依赖于其他脚本（需要保持执行顺序） * 示例：页面初始化脚本、DOM操作库 2. **使用 async**： * 脚本完全独立，不依赖其他脚本 * 不操作DOM或可以等待 * 示例：统计分析代码、广告脚本 3. **不使用任何属性**： * 脚本很小且必须立即执行 * 脚本对页面渲染至关重要（如首屏关键功能） ### 注意事项 * 这两个属性只对**外部脚本**（有src属性的脚本）有效，对内联脚本无效 * 如果同时使用 `defer` 和 `async`，现代浏览器会优先采用 `async` 的行为 * defer脚本保证在 `DOMContentLoaded` 事件前执行 * 使用这些属性时，脚本不应使用 `document.write`，因为文档可能已经解析完成 ### 示例 ```html ``` 通过合理使用 defer 和 async 属性，可以显著提高页面加载性能，特别是对于包含多个脚本的页面。

【HTML】＜script＞元素中的 defer 和 async 属性详解

文章目录