5## 虚拟DOM和Diff算法
虚拟DOM
1.什么是虚拟DOM
- 用一个简单的对象去代替复杂的DOM对象,存储了对应DOM的一些重 要参数,在改变DOM之前,会先比较相应虚拟DOM的数据,如果需要改变,才 会将改变应用到真实DOM上
2.虚拟DOM的作用是什么
- 兼容性好。因为Vnode本质是JS对象,所以不管Node还是浏览器环境,都可以操作;
- 减少了对DOM的操作。页面中的数据和状态变化,都通过Vnode对比,只需要在比对完之后更新DOM,不需要频繁操作,提高了页面性能;
3.虚拟DOM和真是DOM的区别
- 虚拟DOM不会进行回流和重绘;
- 真实DOM在频繁操作时引发的回流重绘导致性能很低;
- 虚拟DOM频繁修改,然后一次性对比差异并修改真实DOM,最后进行依次回流重绘,减少了真实DOM中多次回流重绘引起的性能损耗;
- 虚拟DOM有效降低大面积的重绘与排版,因为是和真实DOM对比,更新差异部分,所以只渲染局部;
Diff算法
1.什么是Diff算法
- diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。简单的说:diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁
2.它的两个特点
- 比较只会在同层级进行, 不会跨层级比较
- 在diff比较的过程中,循环从两边向中间比较
3.Diff算法的实现
1、 用javascript对象结构表示DOM树到的结构,然后用这个树构建一个真正的DOM树,插到文档当中
2、 当状态变更的时候,重新构造一棵新的树和旧的树进行比较,记录两棵树差异
3、 把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch),视图就更新了