Javascript：更改 DOM 时是否会更新整个 DOM？

Question

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

Answer 1

简而言之，这取决于。您可以对 DOM 进行几种类型的更改。来自Google 这篇有关渲染性能的文章：

\n\n

\n

如果您更改 \xe2\x80\x9clayout\xe2\x80\x9d 属性，则 \xe2\x80\x99s 会更改元素\xe2\x80\x99s 的几何形状，例如其宽度、高度或其左侧位置或顶部，浏览器将必须检查所有其他元素和 \xe2\x80\x9creflow\xe2\x80\x9d 页面。

\n

\n\n

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

\n\n

\n

如果仅更改了 \xe2\x80\x9cpaint \xe2\x80\x9d 属性，例如背景图像、文本颜色或阴影，换句话说，不影响页面布局的属性，则浏览器会跳过布局，但它仍然会做油漆。

\n

\n\n

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

\n\n

浏览器会尽力完成尽可能少的工作。

\n

Answer 2

当你更新 DOM 时，就会发生回流和重绘。
\n每次 DOM 发生变化时，浏览器都需要重新计算 CSS、进行布局并重新绘制网页。

\n\n

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

\n\n

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

\n