Javascript：当您对 DOM 进行更改时，整个 DOM 是否会更新？答案

【问题标题】：Javascript: Is the Entire DOM Updated When You Make Changes to the DOM?Javascript：当您对 DOM 进行更改时，整个 DOM 是否会更新？
【发布时间】：2020-02-13 05:50:37
【问题描述】：

我最近开始学习 React 框架并读到 React 创建了一个虚拟 DOM 来跟踪更改。当 React 更新原始 DOM 时，它只更新虚拟 DOM 上发生变化的对象。这是否意味着当我只使用普通的 javascript 进行编程并附加一个新对象（例如一个新的列表项）时，即使我只添加了一个新项，整个 DOM 也会更新？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

当您更新 DOM 时，会发生重排和重绘。
每次 DOM 发生变化时，浏览器都需要重新计算 CSS，进行布局并重新绘制网页。

React 并没有真正做任何新的事情。这只是一个战略举措。

它的作用是将真实 DOM 的副本存储在内存中。当您修改 DOM 时，它首先将这些更改应用到内存中的 DOM。然后，使用它的差异算法，找出真正发生了什么变化。最后，它对更改进行批处理，并调用将它们一次性应用到真实 dom。
因此，最大限度地减少了回流和重绘。

【讨论】：

批量更改究竟是什么意思？ React 最终也会做 document.appendChild 或 document.getElementById 并做正确的改变？
这将是完全不同的问题，这里是解释它的文章。你可以关注这篇文章medium.com/@adhithiravi/…

【解决方案2】：

简而言之，这取决于。您可以对 DOM 进行几种类型的更改。来自this article on rendering performance by Google：

如果您更改“布局”属性，即更改元素的几何形状，例如其宽度、高度或左侧或顶部的位置，浏览器将不得不检查所有其他元素并“重排”页。

这些更改将需要重新绘制整个 DOM。然而：

如果您更改了“仅绘制”属性，例如背景图像、文本颜色或阴影，即不影响页面布局的属性，则浏览器会跳过布局，但仍会进行绘制.

因此，调整说，某些文本的 color 属性将只需要 that 元素重新绘制，而无需重新绘制 DOM 的其他部分。您还可以进行一些更改，直接进行合成，不需要任何类型的重绘。

浏览器会尽最大努力做尽可能少的工作。

【讨论】：