如何确保DOM可见变更渲染完成后再执行后续代码？

当浏览器端JS存在大量计算逻辑时，单独使用requestAnimationFrame无法触发渲染的核心原因是：它的回调会在浏览器下一次重绘前执行，此时DOM变更还未完成渲染，后续计算会立刻抢占执行权，导致进度文本无法及时显示。以下是两种标准且可靠的解决方案：

1. 双重requestAnimationFrame嵌套 #

通过两次嵌套requestAnimationFrame，可以确保回调在一次完整渲染完成后触发，让浏览器有足够时间更新DOM并显示进度：

...compute...

statusElement.innerText = 'we\'re almost done!';
await new Promise(resolve => {
  // 第一个rAF在当前渲染周期的重绘前触发
  requestAnimationFrame(() => {
    // 第二个rAF被推入下一个渲染周期的重绘前队列
    requestAnimationFrame(resolve);
  });
});

...compute...

原理：第一个requestAnimationFrame等待当前渲染周期的准备阶段，第二个则会等到下一次渲染周期开始前——这中间浏览器已经完成了一次完整的渲染流程，进度文本会被显示出来。

2. 使用setTimeout（简单易用） #

setTimeout的回调属于宏任务，会在当前宏任务、微任务执行完毕，且浏览器完成渲染后才触发，能直接确保DOM变更可见：

...compute...

statusElement.innerText = 'we\'re almost done!';
await new Promise(resolve => setTimeout(resolve, 0));

...compute...

注意：部分浏览器对setTimeout有最小延迟限制（如Chromium为4ms），但对于进度显示场景，这个延迟几乎可以忽略，且实现成本极低。

额外注意事项 #

• 确保DOM变更确实会触发重绘：像innerText修改这类操作天然会触发重绘，但如果是复杂DOM操作，可手动调用element.offsetHeight强制浏览器计算布局（不过一般不需要）。
• 避免过度拆分计算：如果计算逻辑可以拆分为多个小任务，推荐结合上述方法分批执行，平衡计算效率和渲染流畅度。

内容的提问来源于stack exchange，提问作者dronus