微任务在dom渲染前执行，即同步代码执行完→清空所有微任务→才进入渲染阶段；promise.then、queuemicrotask、mutationobserver等微任务均在此时执行，无法等待真实渲染完成。

微任务在 DOM 渲染前执行，这是由浏览器事件循环的固定时序决定的：同步代码执行完 → 立即清空所有微任务 → 才进入渲染阶段。所以哪怕你刚改完 DOM，只要没跳出当前任务，浏览器就还不会画到屏幕上。

微任务总在渲染之前执行

Promise.then、queueMicrotask、MutationObserver 回调都属于微任务，它们被推入微任务队列后，会在当前宏任务（比如一次点击处理、一段 script 执行）结束后、浏览器开始计算样式和布局前，全部执行完毕。这意味着：

• DOM 修改语句（如 el.innerHTML = 'x'）虽已生效，但页面尚未重绘
• 此时读取 offsetHeight、getBoundingClientRect() 等布局信息，可能得到旧值或 0
• 连续多个 Promise.then 会按顺序立刻执行，中间不穿插渲染

为什么不能靠微任务“等渲染完成”

因为微任务的设计定位就是“JS 逻辑层的快速响应”，它不关心视觉是否更新。例如：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• 你调用 el.classList.add('active') 后立刻进 Promise.then，样式类已加，但 CSS 计算、布局、绘制全没发生
• MutationObserver 虽监听 DOM 变化，但它触发的回调仍是微任务，同样赶不上渲染
• 想确认“用户真看到了新内容”，不能依赖微任务，得换更靠后的时机

需要真实渲染后操作，该用什么

如果目标是读取渲染后的尺寸、坐标，或确保动画帧已就绪，应使用 requestAnimationFrame：

• 它被调度在“微任务清空之后、本次重绘之前”，是获取最新布局信息的安全窗口
• 浏览器保证在此回调中，所有 DOM 更新、样式计算、布局已完成，只差最后绘制
• 示例：requestAnimationFrame(() => { console.log(el.offsetHeight); })

常见误用对比

以下三段代码执行顺序不同，效果也不同：

• 同步修改 + Promise.then：DOM 改了，但 offsetHeight 还是旧值
• 同步修改 + setTimeout(fn, 0)：进了下一轮宏任务，中间经历了一次渲染，大概率能读到新值（但不保证）
• 同步修改 + requestAnimationFrame：明确等待到渲染流水线的“布局完成点”，结果稳定可靠

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