虚拟DOM是纯粹的开销（2018）

如果你在过去几年中使用了javascript框架，你可能听到了这句话＆＃39;虚拟Dom是快速的，往往表示意味着它比真正的dom。它＆＃39;令人惊讶的弹性模因 - 例如，人们已经问了在它不使用虚拟DOM时如何快速快速。

在许多框架中，您通过创建渲染（）函数构建应用程序，例如此简单的React组件：

...但结果是相同的 - 代表页面现在应该如何看的对象。该对象是虚拟DOM。每次您的应用程序＆＃39; s状态更新（例如，当名称道具更改时），您可以创建一个新的。框架＆＃39;工作的工作是将新的作业与旧的一个核对，以弄清楚必需的变化并将它们应用于真正的DOM。

误解了对虚拟DOM性能的声明返回恢复的启动。在重新思考最佳实践中，2013年2013年通过前反应核心团队成员PETE狩猎，我们学会了以下内容：

这实际上是非常快的，主要是因为大多数DOM操作往往很慢。在DOM上有很多表现工作，但大多数DOM操作都倾向于丢弃框架。

但是挂在一分钟！虚拟DOM操作还要除了真实DOM上的最终操作。如果我们将其与较低效率的框架相比，可能更快的唯一方法（2013年有很多东西！）或争论稻草人 - 替代方案是做一些实际上没有人：

反应不是魔法。就像你可以用C丢弃到汇编程序并击败C编译器，你可以丢弃到原始的DOM操作和DOM API调用，如果您想要，则会击败反应。但是，使用C或Java或JavaScript是一个幅度绩效的顺序，因为您不必担心......关于平台的细节。如果反应，您可以在不考虑性能的情况下构建应用程序，默认状态快。

不完全是。它＆＃39;更像＆＃39;虚拟DOM通常足够快，但是某些警告。

反应的原始承诺是您可以在每一个状态更改时重新渲染整个应用，而无需担心性能。在实践中，我认为＆＃39;原来是准确的。如果是，那里＆＃39; D是不需要的优化，如应该是Componentupdate（这是一种在安全跳过组件时讲述反应的方式）。

即使使用了Componentupdate，更新整个应用程序＆＃39;在一个GO中更新虚拟DOM是很多工作。一段时间后，React团队介绍了一种被称为React Fiber的东西，使得更新将被分解为较小的块。这意味着更新Don＆＃39; t阻止了长时间的主线程，尽管它没有减少更新的总工作量或更新所需的时间。

最明显的是，差别不自由。您可以＆＃39; t将更改应用于Real DOM，而无需将新的虚拟DOM与上一个快照“进行比较。要采取早期的HellomeSsage榜样，假设姓名道具从＆＃39改变;世界＆＃39; ＆＃39;每个人和＃39;

两个快照都包含一个元素。在两种情况下，它＆＃39; s a＆lt; div和gt;这意味着我们可以保持相同的DOM节点

我们枚举旧的所有属性＆lt; div＆gt;和新的，看看是否有任何需要更改，添加或删除。在这两种情况下，我们都有一个属性 - 具有值＆＃34的类名;问候＆＃34;

下降到元素中，我们看到文本已更改，所以我们＆＃39; ll需要更新真正的dom

在这三个步骤中，在这种情况下，只有第三个具有值，因为绝大多数更新中的情况如此 - 应用程序的基本结构不变。如果我们可以直接跳到第3步：

（这几乎完全是Svelte生成的更新代码。与传统的UI框架不同，Svelte是一个编译器，它在构建时间内知道如何在您的应用程序中改变，而不是在运行时执行工作。）

反应和其他虚拟DOM框架使用的不同算法快。可以说，较大的开销本身就在组件中。你不会写这样的代码......

......因为你＆＃39; d无论是props.foo还是改变了每次更新都会不小心重新计算价值。但是它非常常见的是做出不必要的计算和分配，似乎良好的方式：

功能潮流isticcomponent（道具）{const [被选中，setSelected] = Usestate（null）;返回（＆lt; div＆gt;＆lt; p＆gt;被选中{被选中的。选定的.name：＆＃39;＆＃39;＆＃39;＆lt; / p＆gt; {props.items。地图（项目= gt ;＆lt;＆lt; on onclick = {（）=＆gt; setSelected（Item）}＆gt; {Item .name}＆lt; /按钮＆gt;＆lt; / li＆gt;）}＆lt; / button＆gt;＆lt; / button＆gt;＆lt; / uld;＆gt;＆lt; / div＆gt;）; }

在这里，我们＆＃39;重新生成一个新的虚拟阵列; li＆gt;元素 - 每个都有自己的内联事件处理程序 - 无论props.items是否已更改，都会发生在每个状态的变化中。除非你和＃39;没有良好地痴迷于表现，＆＃39;重申没有优化这一点。没有点。它＆＃39;很快就足够了。但你知道更快的是什么？不是这样做的。

违约做出不必要的工作的危险，即使这项工作是微不足道的，也是你的应用程序最终将屈服于＆＃39;死亡的死亡＆＃39;没有明确的瓶颈，瞄准它＆＃39;时间优化。

重要的是要了解虚拟DOM ISN＆＃39; t一个功能很重要。 它＆＃39; s一个终端的手段，结束是声明性的，状态驱动的ui开发。 Virtual DOM是有价值的，因为它允许您在不考虑状态转换的情况下构建应用程序，其性能通常足够好。 这意味着更少的错误代码，更多的时间在创造性任务上而不是繁琐的时间。 但事实证明，我们可以在不使用虚拟DOM的情况下实现类似的编程模型 - 并且＆＃39; svelte进来的地方。