2021-10-28

虚拟DOM

虚拟domvue和react都用到的一种技术，都说他能帮助vue和react提升渲染性能，提升用户体验。那么今天我们来详细看看虚拟dom到底是个什么

虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。

虚拟dom的结构：

 他是一个对象，下面有6个属性，sel表示当前节点标签名，data内是节点的属性，elm表示当前虚拟节点对应的真实节点（这里暂时没有），text表示当前节点下的文本，children表示当前节点下的其他标签

 我们都知道，传统dom数据发送变化的时候，我们都需要不断的去操作dom，而虚拟dom可以很好的跟踪当前dom状态，因为他会根据当前数据生成一个描述当前dom结构的虚拟dom，然后数据发送变化时，又会生成一个新的虚拟dom，而这两个虚拟dom恰恰保存了变化前后的状态。然后通过diff算法，计算出两个前后两个虚拟dom之间的差异，得出一个更新的最优方法（哪些发生改变，就更新哪些）。可以很明显的提升渲染效率以及用户体验。。

 2.什么是diff算法

1、比较两个虚拟dom树，对根节点root进行执行patch(oldVnode，newVnode)函数，比较两个根节点是否是相同节点。如果不同，直接替换（新增新的，删除旧的）

 2、如果相同，对两个节点执行patchVnode（oldVnode, newVnode），比较属性，文本，以及子节点。此时，要么新增，要么删除。要么直接修改文本内容。只有当都存在子节点时，并且oldVnode === newVnode 为false时。会执行updateChildren函数，去进一步比较他们的子节点。

 3、比较分3大类。

第一类：oldStart === newStart， oldStart === newEnd，oldEnd === newStart，oldEnd === newEnd 这4种情况的比较。如果这4种情况中任何一种匹配。那么会执行patchVnode进一步比较。同时指针往中间移

第二类：oldStart > oldEnd 或者 newStart > newEnd时。表示匹配结束。此时，多余的元素删除，新增的元素新增。

第三类：上面几种情况都不匹配。那么这个时候key是否存在。就起到关键性作用了。存在key时，可以直接通过key去找到节点的原来的位置。如果没有找到，就新增节点。找到了，就移动节点位置。查找效率非常高
而如果没有key呢，那么压根就不会去原来的节点中查找了。而是直接新增这个节点。这就导致这个节点下的所有子节点都会被重新新增。会出现明显的性能损耗。所以，合理的应用key，也是一种性能上的优化。

总之一句话。diff的过程，就是一个 patch —> patchVnode —> updateChildren —> patchVnode —> updateChildren —> patchVnode… 这样的一个循环递归的过程