运用diff算法的Virtual DOM

什么叫做diff算法?

百科解释：①把树形结构按照层级分解，只比较同级元素。②给列表结构的每个单元添加唯一的 key 属性，方便比较。

传统的diff算法根据大O推导法（具体算法的问题不做细解）的时间复杂度为O(n^3)

比如左侧树a节点依次进行如下对比，左侧树节点b、c、d、e亦是与右侧树每个节点对比，算法复杂度能达到O(n^ 2)，n代表节点的个数：a->e、a->d、a->b、a->c、a->a，查找完差异后还需计算最小转换方式，最终达到的算法复杂度是O(n^3)。大型的项目如果有多个的节点，会特别的消耗计算机的内存性能。
浏览器从拿到html文件到最终解释为页面信息过程如下

当需要替换其中一部分的dom，会造成整个页面的重新比较、重新更新替换，浏览器拿到新的html元素构建新的dom树，①–⑤的过程重新加载，对浏览器、用户而言均不友好，会加剧浏览器的处理进程，影响用户的感知体验，这是最不愿意看到的效果。

在正常传统diff算法的大O推导法算出来的时间复杂度不适和现有的要求。在此时有一个叫Virtual DOM(虚拟DOM)。虚拟dom有一个重要的思维：js模拟虚拟DOM放在js层与真实dom做对比操作。由于js是弱类型、图灵完备语言，能够执行判断、循环、递归、一些复杂的逻辑算法

总结：由于虚拟dom的产生就是把大O推导法下的时间复杂度的O(n^3)降低到0(n)简化了昂贵的真实dom的操作，不管是Vue.js还是React.js都是Virtual DOM下减少DOM的操作、减少浏览器的性能消耗，由于在diff算法下的只比较差异对象，把差异对象patch到dom上，只有部分的节点进行操作、更新、替换，不会造成整个浏览器的重塑，只会有小部分的回流，对用户、浏览器都是一个双赢的过程

备注：

以上部分数据、图表、文字信息参考网络部分，如有侵权联系删除。
有错误之处还请联系指出。
如若雷同，不胜荣幸。