虚拟 DOM 是如何降低重绘与回流的

在前端开发领域，重绘与回流是影响页面性能的关键因素，而虚拟 DOM 的出现有效缓解了这一问题。那么，虚拟 DOM 究竟是怎样降低重绘与回流的呢？

要理解什么是重绘与回流。回流是当 DOM 的变化影响了元素的几何信息（元素的的位置、大小尺寸、边距等）浏览器需要重新计算元素的几何信息，将其安放在界面中的正确位置。重绘是当一个元素的外观发生改变，但没有影响布局信息时，浏览器会将该元素的外观重新绘制。频繁的重绘与回流会导致页面卡顿，降低用户体验。

虚拟 DOM 本质上是一个轻量级的 JavaScript 对象，它是真实 DOM 的抽象表示。当数据发生变化时，虚拟 DOM 会首先创建一个新的虚拟 DOM 树，然后将新的虚拟 DOM 树与旧的虚拟 DOM 树进行对比，通过 diff 算法找出其中的差异。这个过程非常高效，因为它只在 JavaScript 层面进行操作，不会涉及到真实 DOM 的任何改动，也就不会触发重绘与回流。

找到差异后，虚拟 DOM 并不会立即将所有的差异都应用到真实 DOM 上，而是将这些差异进行整合。它会把一系列的 DOM 操作集中起来，一次性地应用到真实 DOM 上。这样一来，原本可能会引发多次重绘与回流的操作，最终只需要一次重绘与回流就能完成，大大减少了重绘与回流的次数。

例如，在一个待办事项列表应用中，当用户添加或删除多个事项时，如果没有虚拟 DOM，每一次的添加或删除操作都可能导致页面的重绘与回流。但通过虚拟 DOM，它会先在虚拟层面计算出所有的变化，最后将这些变化一次性更新到真实 DOM 上，极大地提升了性能。

虚拟 DOM 通过高效的 diff 算法对比差异、整合 DOM 操作，从而显著降低了重绘与回流的次数，为开发者打造高性能的前端应用提供了有力支持。