前言

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不太给力的场景下，性能也在我们接受的范围内。

---

参考资料

---

初心

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

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

共勉