探究虚拟dom与diff算法

一、虚拟DOM

（1）什么是虚拟DOM？

vdom可以看作是一个使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息，如下图：

 

 

可见左边的DOM结构，不论是标签名称还是标签的属性或标签的子集，都会对应在右边的树结构里。

（２）为什么要使用虚拟DOM？

因为在以前使用原生js写页面的时候会发现操作DOM是一件非常麻烦的一件事情，往往是DOM标签和js逻辑同时写在js文件里，数据交互时不时还要写很多的input隐藏域，如果没有好的代码规范的话会显得代码非常冗余混乱，耦合性高并且难以维护。

另外一方面在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的，常常会出现页面卡死的情况；所以尽量减少对DOM的操作成为了优化前端性能的必要手段，vdom就是将DOM的对比放在了js层，通过对比不同之处来选择新渲染DOM节点，从而提高渲染效率。

diff算法

抽象概念

diff是广泛的概念，如git diff，js对象 diff等。两棵树做diff，即虚拟DOM中的diff算法。

diff算法的必要性：渲染真实DOM的开销是很大的，轻微的操作都可能导致页面重新排版，非常耗性能。 相对于DOM对象，js对象处理起来更快，而且更简单。 通过diff算法对比新旧vdom之间的差异，可以批量的、最小化的执行 dom操作，从而提高性能。

1. 只比较同一层级。

2.tag不相同，直接删掉重建。

3.通过key来标识区分相同节点。