为什么虚拟 DOM 速度如此之快？
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
当你开始学习前端世界时，你几乎会立即遇到“虚拟 DOM”这个术语。
大多数流行的前端框架都使用它，并希望通过它来证明自己的速度。
是什么让它速度如此之快？
是什么导致真正的 DOM 运行缓慢且效率低下？
了解浏览器渲染
这个话题相当复杂，但你需要了解一些基础知识才能理解 DOM。
假设我们从服务器请求一个简单的 HTML/CSS 页面；这里我们不需要 JS。
收到 HTML/CSS 格式的响应后，会发生以下情况：
1. 解析 HTML
浏览器解析 HTML 文件，并将其以高效的树状结构存储在内存中。
这种表示方法叫做 DOM——文档对象模型。您可以通过打开开发者工具并选择“元素”选项卡来查看它。
需要澄清的是，DOM 不是 HTML！它只是 HTML 和 XML 文件的接口。
2. 解析 CSS
这一步骤包括解析 CSS 并将其存储为树状结构，称为 CSSOM。
3. 创建渲染树
将 DOM 和 CSSOM 结合起来，就得到了渲染树。它由 HTML 节点及其样式组成，代表了浏览器中渲染的内容。
这不会包含所有 HTML 节点（例如 <div>）<head>，也不会包含带有 <div> 的元素display: none;。只会包含屏幕上实际可见的节点。
4. 布局阶段
此阶段的目的是计算渲染树中每个节点的位置。浏览器将从根节点开始遍历整棵树。
可以想象，这个过程会非常耗费资源，因为它需要对树中的每个节点进行大量的计算。
在这个阶段结束时，浏览器就能知道每个元素的精确位置和大小。
5. 喷漆阶段
最后，我们可以填充布局阶段之后得到的空白框架。
浏览器必须遍历视口中需要填充的每一个像素。听起来很费资源，对吧？
没错。这绝对是计算量最大的步骤。
您可以在开发者工具的“性能”选项卡下查看布局和绘制阶段。
让我们来算算账
您可能已经知道，树状结构效率极高。我们现有的算法可以轻松遍历庞大的树状结构。
这样做成本很低。而步骤 1-3 的目的就在于此。
另一方面，步骤 4 和 5 的开销可能非常大，因为我们需要额外操作屏幕上的每个像素。这些算法虽然效率很高，但与树状结构相比仍然很慢。
显然，页面初始渲染需要更长时间，虚拟 DOM 也帮不上什么忙。屏幕上现在什么都没有，对吧？
但是，之后当我们进行更新时，虚拟 DOM 将执行步骤 1-3。它会将新的渲染树与之前的渲染树进行比较，并且仅对修改过的节点执行步骤 4-5。
这就是它速度如此之快的原因！
它不需要从头开始执行整个过程。它只会重新渲染（步骤 4 和 5）已修改的节点！
最棒的是——你不需要操心这些。你神奇的前端工具会自动为你完成这一切。
如果你阅读React 官方文档中关于性能优化的部分，你会发现：
“React 内部使用多种巧妙的技术来最大限度地减少更新 UI 所需的高成本 DOM 操作次数。对于许多应用程序而言，使用 React 无需进行太多专门的性能优化工作，就能获得快速的用户界面。”
所以不要进行不必要的优化。大多数情况下，这些优化带来的复杂性反而会导致代码运行速度变慢。
爱戴并赞美VDOM。
文章来源：https://dev.to/domagojvidovic/why-is-the-virtual-dom-so-fast-o6e