前言

1. vm/ 虚拟 DOM 做前端的肯定都不陌生了,react和vue中都使用了虚拟DOM
2. 今天来说下虚拟 DOM 一定更快吗? 抬杠了

2. 是什么 what

1. 虚拟 DOM 的主要优势在于它可以通过比较前后两个虚拟 DOM树的差异来最小化实际 DOM 的操作。
2. 通过将对实际 DOM 的修改集中处理，可以减少回流（Reflow）和重绘（Repaint）的次数，从而提高性能。

3. 虚拟DOM不一定更快

1. 虚拟 DOM 也引入了额外的开销。
2. 在每次更新时，需要生成新的虚拟 DOM 树，并与之前的虚拟 DOM 树进行比较。
3. 这个比较过程需要耗费一定的计算资源。而对于简单的应用或页面，直接操作实际 DOM 可能更快，
4. 因为省去了虚拟 DOM 的生成和比较过程

1. 虚拟 DOM 的性能还受到底层实现的影响。
2. 不同的虚拟 DOM 实现可能在性能方面有所差异。
3. 一些优化手段如 diff 算法的优化、批量更新等也会影响虚拟 DOM 的性能

• 案例

1. 一个页面就有一个按钮，点击一下，数字加一，那肯定是直接操作DOM更快

4. react中呢

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

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

5. 那为啥还都用 虚拟DOM呢

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

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉