一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查看活动详情。
什么是虚拟dom?
virtual Dom虚拟dom，用普通js对象来描述dom结构，因为不是真实dom，所以称之为虚拟dom。
虚拟dom是相对于浏览器所渲染出来的真实dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询dom树的方式找到需要修改的dom然后修改样式行为或者解构，从而达到更新Ui的目的。
这种方式相当消耗计算资源，因为每次查询dom几乎都需要遍历整颗dom树，如果监理一个与dom树对应的虚拟dom对象，来表示dom树以及层级结构，那么每次dom的更改就变成了对js对象的属性的增删改，这样一来查找js对象的属性变化要比查询dom树的性能开销小。
区别
虚拟dom不会进行排版与重绘操作，而真实dom会频繁重排与重绘。
虚拟dom的总损耗是“虚拟都能增删改+真实dom差异增删改+排版与重绘”，真实dom的总损耗是“真实dom完全增删改+排版与重绘”
实现原理
- 虚拟dom的本质上是
JavaScript对象，是对真实dom的抽象 - 状态变成是，记录新树与旧树的差异
- 最后吧差异更新到真正的dom中
虚拟dom的优劣如何？
优点
- 保证性能下限：虚拟dom可以经过diff找出最小差异，然后批量进行patch，这种操作虽然比不上手动优化，但是比起粗暴的dom操作性能要好很多，因此虚拟dom可以保证性能下限
- 无需手动操作dom：虚拟dom的diff和patch都是在一次更新中自动进行的，我们无需手动操作dom,极大提高开发效率
- 跨平台：虚拟dom本质上是JavaScript对象，而dom与平台强相关，相比之下虚拟dom可以进行更方便的跨平台操作，例如服务器端渲染、移动端开发等等
缺点
- 无法进行极致优化： 在一些性能要求极高的应用中虚拟dom无法进行针对性的极致优化，比如vscode采用直接手动操作dom的方式进行极端的性能优化。
