dom操作同步执行但渲染延迟，需在domcontentloaded、defer脚本或微任务中安全访问；读取布局用requestanimationframe，批量更新后用promise.then而非settimeout。

DOM 操作和 JavaScript 异步执行顺序紧密相关，关键在于：DOM 修改是同步的，但它的可见效果（渲染）发生在微任务之后、下一个宏任务之前；而很多 DOM 操作（如获取元素尺寸、监听事件）必须等 DOM 真正就绪才能安全执行。

DOM 加载完成前不能操作节点

浏览器按顺序解析 HTML，遇到 <script></script> 标签会立即下载并执行 JS。此时若脚本尝试访问尚未解析到的 DOM 元素（比如 document.getElementById('app')），结果是 null。

• 外部脚本默认阻塞 HTML 解析，因此放在 中容易出错
• 推荐把脚本放在 前，确保 DOM 已基本构建完成
• 若必须放 ，可用 DOMContentLoaded 事件或 defer 属性

异步代码中访问 DOM 的时机很关键

不是所有异步回调都适合立刻操作 DOM。例如：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• setTimeout(fn, 0) 是宏任务，执行时 DOM 可能还没渲染（尤其在大量同步操作后）
• Promise.then() 是微任务，在当前同步代码结束、渲染前执行，适合做 DOM 更新后的逻辑处理
• requestAnimationFrame() 是宏任务，但专为动画设计，会在下一次重绘前触发，适合读取布局（如 offsetHeight）

常见 DOM 相关异步场景的执行顺序

以下代码执行顺序能说明问题：

console.log(1);
document.body.innerHTML = '

';
console.log(2);
Promise.resolve().then(() => console.log(3));
setTimeout(() => console.log(4), 0);
requestAnimationFrame(() => console.log(5));

输出是：1 → 2 → 3 → 5 → 4。说明：

• 同步代码（1、2）最先执行
• 微任务（3）紧随其后，在渲染前运行
• requestAnimationFrame 在微任务之后、渲染之前触发（4）
• 宏任务（4）排在最后，要等本次渲染完成才执行

安全操作 DOM 的实用建议

• 初始化逻辑用 DOMContentLoaded 或 defer 脚本，确保 DOM 就绪
• 修改 DOM 后想立即读取布局（如宽高），用 requestAnimationFrame
• 批量更新 DOM 后统一触发逻辑，优先选 Promise.then 而非 setTimeout
• 避免在 setTimeout 中频繁查询未挂载的元素，可加 if (el) 判断或改用 MutationObserver

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南