虚拟dom的diff算法

今天看到一篇关于diff算法的博客：https://www.cnblogs.com/wind-lanyan/p/9061684.html

茅塞顿开，醍醐灌顶，一下懂了，写下心得，以后再来读。

virtualDOM和虚拟dom的区别：虚拟dom以对象形式存在。当我们修改了数据的时候，如果每次都触发dom的重绘和回流会在很大程度上影响性能，所以采用diff算法：

diff算法会将同级的虚拟dom进行比较，发现差异修改虚拟dom，再渲染出新的dom树。

比较新旧虚拟dom树时，先判断是否值得比较，如果值得比较再接着做下面的操作，如果不值得比较，直接做替换操作；

判断是否值得比较：比较key、标签名、是否是注释节点、data（onclick style等）是否相同，如果是input标签，type必须相同，如果这些基本属性相同，则认为值得做下一步比较；

若值得比较，则可比较子节点，diff算法是逐级比较的，如果上层节点不同，则下面的节点不会接着做比较。如果两个对象全等===，则不用做接下来的任何比较，就结束了；如果两个中有的没有子节点，有的有的话做相应操作；如果两个都有子节点，则比较下方子节点（调用updateChildren方法）。

updateChildren方法：

如图，两对S\E，这四个node做比较，如果黄的有跟对方相等的，以新node的位置为准落下来，箭头往中间移动；如果两对黄的和两对粉色的没有相等的，则用新的S去旧的node中遍历，如果遇到相等的就落下来，旧的少一个，新的node位置以黄色为准，S向内移动。以此类推。

就这样层层比较下去，知道dom树比较完成。