虚拟DOM一定更快吗

虚拟DOM／domDiff

我们常说的虚拟DOM是通过JS对象模拟出来的DOM节点,domDiff是通过特定算法计算出来一次操作所带来的DOM变化。react和vue中都使用了虚拟DOM，我们借着react聊聊虚拟DOM。

react中涉及到虚拟DOM的代码主要分为以下三部分，其中核心是第二步的domDiff算法：

• 把render中的JSX(或者createElement这个API)转化成虚拟DOM
• 状态或属性改变后重新计算虚拟DOM并生成一个补丁对象(domDiff)
• 通过这个补丁对象更新视图中的DOM节点

虚拟DOM不一定更快

干前端的都知道DOM操作是性能杀手，因为操作DOM会引起页面的回流或者重绘。相比起来，通过多一些预先计算来减少DOM的操作要划算的多。

但是，“使用虚拟DOM会更快”这句话并不一定适用于所有场景。例如：一个页面就有一个按钮，点击一下，数字加一，那肯定是直接操作DOM更快。使用虚拟DOM无非白白增加了计算量和代码量。即使是复杂情况，浏览器也会对我们的DOM操作进行优化，大部分浏览器会根据我们操作的时间和次数进行批量处理，所以直接操作DOM也未必很慢。

那么为什么现在的框架都使用虚拟DOM呢？因为使用虚拟DOM可以提高代码的性能下限，并极大的优化大量操作DOM时产生的性能损耗。同时这些框架也保证了，即使在少数虚拟DOM不太给力的场景下，性能也在我们接受的范围内。

而且，我们之所以喜欢react、vue等使用了虚拟DOM框架，不光是因为他们快，还有很多其他更重要的原因。

例如：

React

• 灵活性和响应性：它提供最大的灵活性和响应能力。
• 丰富的JavaScript库：来自世界各地的贡献者正在努力添加更多功能。
• 可扩展性：由于其灵活的结构和可扩展性，React已被证明对大型应用程序更好。
• 不断发展： React得到了Facebook专业开发人员的支持，他们不断寻找改进方法。
• Web或移动平台： React提供React Native平台，可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序。

Vue

• 易于使用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。
• 更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑地集成更小的部件，而不会对整个系统产生任何影响。
• 更好的性能，更小的尺寸：它占用更少的空间，并且往往比其他框架提供更好的性能。
• 精心编写的文档：通过详细的文档提供简单的学习曲线，无需额外的知识; HTML和JavaScript将完成工作。
• 适应性：整体声音设计和架构使其成为一种流行的JavaScript框架。
• 它提供无障碍的迁移，简单有效的结构和可重用的模板。

如上所说的 Vue 的响应式机制也有问题，当 state 特别多的时候，Watcher 会很多，会导致卡顿，所以大型应用（状态特别多的）一般用 React，更加可控。

可对于易用性来说，VUE 是更容易上手的，对于项目来说新人更容易接手。