dom

虚拟dom

虚拟dom就是利用js来模拟dom操作，在需要大量操作dom的情况下， 能够减少浏览器的重绘和回流，提高性能；

虚拟dom更新流程

1. 真实dom更新映射为虚拟dom
2. 虚拟dom变化后根据差距生成patch
3. 根据patch来更新真实dom，反馈到界面

diff算法

diff算法探讨的是虚拟dom发生变化之后生成dom树更新补丁的方式，通过对比生成差异，以最小的代价来更新dom

diff算法重点

1. 更新时机 但虚拟dom发生变化的时候
2. 遍历算法 深度优先遍历算法/广度优先遍历算法 react采用深度优先遍历，避免react生命周期顺序出现错误
3. 优化策略 分治

react的diff算法

react优化策略

1. 忽略节点跨层级操作场景，提升效率
2. 组件的class一致则为相似的树结构，否则默认为不同的树结构
3. 同一层级的子节点可以通过列表key的方式进行对比
4. fiber机制下节点与树分别采用fiberNode与fiberTree进行重构
5. fiber机制下整个更新过程由current与workInProgress两株树双缓冲完成

如何根据diff算法来优化组件

1. 尽量避免组件的跨层级移动
2. 通过设置唯一的key和减少组件深度来提高diff性能
3. 通过设置shouldComponentUpdate和pureComponent减少diff次数

real dom 和虚拟dom的对比

虚拟dom的优点

1. 简单方便：如果使用手动操作真实DOM来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
2. 性能方面：使用Virtual DOM，能够有效避免真实DOM数频繁更新，减少多次引起重绘与回流，提高性能
3. 跨平台：React借助虚拟DOM， 带来了跨平台的能力，一套代码多端运行

虚拟dom的缺点

1. 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化
2. 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，速度比正常稍慢

真实DOM的缺点

1. 效率低，解析速度慢，内存占用量过高
2. 性能差：频繁操作真实DOM，易于导致重绘与回流