defer脚本在dom构建完成、domcontentloaded触发前按序执行,适合依赖dom或有脚本依赖的场景;async脚本下载完立即执行、顺序不可控,仅适用于完全独立、无dom操作的脚本。

DOM树加载完成时,defer 和 async 都能让脚本不阻塞HTML解析,但它们的执行时机和适用场景完全不同——选错会导致脚本执行顺序错乱或依赖未就绪。
defer:等DOM构建完再按顺序执行
defer 适用于有依赖关系、需操作DOM的脚本(比如初始化页面组件)。它让浏览器并行下载脚本,但推迟执行,直到整个HTML解析完毕、DOM树构建完成(即触发 DOMContentLoaded 事件前)。
- 多个
defer脚本保持书写顺序执行,适合模块化、有先后依赖的代码 - 只对外部脚本生效(
<script src="..." defer></script>),内联脚本加defer会被忽略 - 即使脚本下载慢,也不会延迟DOM构建,但会延迟
DOMContentLoaded的触发(直到所有defer脚本执行完)
async:下载完立刻执行,不保证顺序
async 适用于完全独立、无依赖、也不操作DOM的脚本(比如统计埋点、广告SDK)。它让脚本异步下载,一旦下载完成就立即执行,不管DOM是否就绪、其他脚本是否加载。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 多个
async脚本执行顺序不确定,谁先下完谁先执行 - 可能在DOM还没解析完时就执行,此时
document.getElementById等操作大概率失败 - 不影响
DOMContentLoaded触发时间,因为它不参与DOM就绪的等待队列
什么时候该用哪个?看脚本是否“等得起”
判断依据不是“要不要快”,而是“能不能晚执行”。
- 需要读写DOM、依赖其他JS模块(如Vue/React初始化)、或必须在DOM就绪后运行 → 用
defer - 纯计算逻辑、第三方分析脚本、资源预加载工具 → 用
async - 内联脚本(
<script>...</script>)无法使用这两个属性,若需延迟执行,应手动包裹在DOMContentLoaded监听器中
和 DOMContentLoaded 的关系要理清
defer 脚本执行时机 ≈ DOMContentLoaded 触发前;async 脚本可能在它之前或之后执行,完全不可控。
- 想确保脚本一定在DOM就绪后运行,且不想手动写事件监听 →
defer是最简方案 - 如果用了
async又需要操作DOM,必须自己加保护逻辑,例如:if (document.body) { /* 执行 */ } else { document.addEventListener('DOMContentLoaded', ...) } - 现代开发中,打包工具常自动为入口文件添加
defer,但第三方SDK通常推荐async(官方文档会明确说明)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










