javascript - Javascript 改变 DOM 是否总是导致 UI 更新？

Question

当浏览器中的 HTML DOM 发生变化时，是否能保证 UI 的更新？或者是否有一种机制可以通知浏览器更新 UI 以反射(reflect)更改？

浏览器是否有规范来实现当 html dom 更改以更新 UI 时的这种行为？

Answer 1

不，您可以很好地修改 DOM，而不会导致任何重新绘制。

以一个显示设置为none的元素为例。它仍然在 DOM 中，但被 CSSOM 丢弃，并且如果修改也不会导致任何重绘:

setTimeout(() => {
  content_div.textContent = 'I got modified';
  console.log(content_div.outerHTML) // "<div id="content">I got modified</div>"
}, 1000);

#hidden {
  display: none;
}

<div id="wrapper">
some hidden content below
<div id="hidden">
  <div id="content_div">I will get modified</div>
</div>
<div>

现在，我觉得您需要了解该主题的基础知识，因此请参阅 this Q/A它解释了浏览器重绘操作的​​三个阶段:

• DOM 更新(同步)
• 回流(通常是异步的，但可以强制同步)
• 重新绘制(异步 @60 FPS 最大值)

对于规范，it's here.