UI错乱源于微任务在渲染前执行，导致DOM测量失真；应改用requestAnimationFrame确保渲染后操作，或使用框架提供的更新后钩子如nextTick、useEffect。
DOM 事件监听器内部执行微任务（如 Promise.then、queueMicrotask）时，若紧接着操作尚未完成渲染的 DOM，极易引发 UI 错乱——比如高度读取为 0、滚动位置错位、样式未生效、元素突然消失或重叠。根本原因在于：微任务在渲染前执行，而你误以为“DOM 已更新”。解决的关键不是回避微任务，而是明确各阶段的边界，并在正确时机介入。
一、先确认错乱是否由微任务抢占渲染导致
典型表现包括：
- 点击按钮后立即
document.getElementById找到元素，但offsetHeight或getBoundingClientRect()返回0 - 动态插入元素后，在
Promise.resolve().then()里调用scrollIntoView()失效 - 使用
el.style.display = 'block'后立刻测量宽高，结果仍是隐藏状态下的值 - Vue/React 中手动触发更新后，在微任务里读取 ref，拿到的是旧布局
二、用 requestAnimationFrame 替代微任务做“渲染后操作”
requestAnimationFrame（简称 rAF）是浏览器提供的、**专为渲染同步设计**的 API。它会在下一帧重绘前执行，确保所有 DOM 变更、样式计算、布局（Layout）已完成，是最可靠的选择。
示例（修复高度读取错误）：
button.addEventListener('click', () => {
container.innerHTML = '<div class="item">New content</div>';
// ❌ 错误：微任务太早，布局未计算
// Promise.resolve().then(() => {
// console.log(container.scrollHeight); // 很可能还是旧值
// });
// ✅ 正确：rAF 确保渲染就绪
requestAnimationFrame(() => {
console.log(container.scrollHeight); // 拿到真实、最新高度
});
});
三、框架内优先使用框架提供的“更新后钩子”
不要在事件监听器里自行调度 rAF 或 nextTick —— 框架已封装更精准的语义化接口：
-
Vue 3：用
await nextTick()（返回 Promise）或onUpdated（组件级） -
React：用
useEffect（依赖数组变化后）、flushSync（强制同步更新，慎用） -
uni-app：用
this.$nextTick()（注意：它等价于 Vue 的nextTick，非 rAF） -
纯 JS + 自定义渲染逻辑：组合
queueMicrotask+rAF更稳妥（见下条）
四、极端场景：需“微任务后 + 渲染后”双重保障
当你的逻辑既依赖响应式系统更新（需微任务），又依赖真实布局（需 rAF），可嵌套使用：
button.addEventListener('click', async () => {
// 触发 Vue/React 状态更新 → 推入微任务队列
state.value = 'new';
// 等待框架完成 DOM 更新（微任务清空）
await nextTick(); // Vue / 或 Promise.resolve().then(...) for vanilla
// 再等待浏览器完成布局与绘制（下一帧）
await new Promise(resolve => {
requestAnimationFrame(() => {
requestAnimationFrame(resolve); // 确保 layout & paint 完成
});
});
// ✅ 此处 DOM 高度、位置、样式全部就绪
const rect = el.getBoundingClientRect();
el.scrollIntoView({ block: 'nearest' });
});
本质上，UI 错乱不是微任务的问题，而是混淆了“JS 执行完成”“DOM 结构更新”“样式计算”“布局计算”“绘制合成”这五个阶段。盯住 rAF 这个锚点，就能稳住渲染节奏。
