Javascript 更改 DOM 是否总是会导致 UI 更新？答案

【问题标题】：Does Javascript changing DOM always causes UI to update?Javascript 更改 DOM 是否总是会导致 UI 更新？
【发布时间】：2019-10-04 06:53:14
【问题描述】：

当浏览器中的 HTML DOM 发生变化时，UI 的更新是否得到保证？或者是否有机制通知浏览器更新 UI 以反映更改？

是否有规范让浏览器在更改 html dom 以更新 UI 时实现此行为？

【问题讨论】：

在自身中更新DOM的行为意味着UI会改变——除非元素是不可见/隐藏的，在这种情况下用户不会注意到它—— - 因为它不是 UI 的一部分。不过，这些变化仍然会立即生效。

标签： javascript html dom browser

【解决方案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，它解释了浏览器的 redraw 操作的三个阶段：

DOM 更新（同步）
重排（通常是异步的，但可以强制同步）
重绘（异步 @60 FPS 最大值）

对于规格，it's here.

【讨论】：