虚拟dome和diff算法

5## 虚拟DOM和Diff算法

虚拟DOM

1.什么是虚拟DOM

• 用一个简单的对象去代替复杂的DOM对象，存储了对应DOM的一些重 要参数，在改变DOM之前，会先比较相应虚拟DOM的数据，如果需要改变，才 会将改变应用到真实DOM上

2.虚拟DOM的作用是什么

1. 兼容性好。因为Vnode本质是JS对象，所以不管Node还是浏览器环境，都可以操作；
2. 减少了对DOM的操作。页面中的数据和状态变化，都通过Vnode对比，只需要在比对完之后更新DOM，不需要频繁操作，提高了页面性能；

3.虚拟DOM和真是DOM的区别

3. 虚拟DOM不会进行回流和重绘；
4. 真实DOM在频繁操作时引发的回流重绘导致性能很低；
5. 虚拟DOM频繁修改，然后一次性对比差异并修改真实DOM，最后进行依次回流重绘，减少了真实DOM中多次回流重绘引起的性能损耗；
6. 虚拟DOM有效降低大面积的重绘与排版，因为是和真实DOM对比，更新差异部分，所以只渲染局部；

Diff算法

1.什么是Diff算法

7. diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。简单的说：diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁

2.它的两个特点

1. 比较只会在同层级进行, 不会跨层级比较
2. 在diff比较的过程中，循环从两边向中间比较

3.Diff算法的实现

1、 用javascript对象结构表示DOM树到的结构，然后用这个树构建一个真正的DOM树，插到文档当中

2、 当状态变更的时候，重新构造一棵新的树和旧的树进行比较，记录两棵树差异

3、 把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了