如何等待可见 DOM 变化的渲染？

Question

如果我们有一些浏览器 JS 代码需要进行大量计算，如何可靠地让浏览器在中间进行一些渲染，例如。我们想要显示进度指示器？我尝试等待

requestAnimationFrame

处理程序，但是（至少在 Chromium 中）并不总是允许渲染发生。

示例：

...compute...

statusElement.innerText = 'were almost done!';
await new Promise(resolve => window.requestAnimationFrame(resolve));

...compute...

经常出现，但并不总是显示“几乎完成”，直到第二次计算完成并且 JS 代码退出。

那么有没有什么规范的方法可以确保在继续之前这个 DOM 更改是可见的？

Answer 1

我认为你最好尝试使用上面的 API 来了解 DOM 的变化。