使用虚拟Dom的好处以及diff算法

首先了解浏览器显示网页经历的5个过程

1、解析标签，生成元素树（DOM树）

2、解析样式，生成样式树

3、生成元素与样式的关系

4、生成元素的显示坐标

5、显示页面

修改真实DOM

每修改一个元素，那么这5个过程都要重新走一次。修改10个元素就走10遍。

修改虚拟DOM

虚拟DOM存储在内存中，对10个元素的修改是在虚拟DOM中进行，修改完后，比较虚拟DOM和真实DOM的差异，当有差异时，再一次过去更新网页的显示，而不是走10遍过程。

虚拟 DOM 好处

速度快，减小了页面渲染过程的次数

首先我们先整明白 diff 算法的本质

diff算法的本质是找出两个对象之间的差异，目的是尽可能复用节点。

此处说到的对象其实就对应 vue中的 virtual dom,即使用 js 对象来表示页面中的 dom 结构。

1

其实仔细思考下，一个dom节点主要包含三个部分

自身的标签名（div）自身的属性（id='app'）子节点(span)

所以我们可以设计如下的对象结构表示一个 dom 节点

const vnode = {
tag:‘div’,
attrs:{id:‘app’},
children:[{ tag:‘span’,attrs:{id:‘child’},children:[‘1’]}]
}

当用户对界面进行操作，比如把 div 的 id 改为 app2 ,将子节点 span 的文本子节点 1 改为 2,那么我们可以得到如下 vnode

const vnode2 = {
tag:‘div’,
attrs:{id:‘app2’},
children:[{ tag:‘span’,attrs:{id:‘child’},children:[‘2’]}]
}

上文说了这个结论,再看下

diff算法的本质是找出两个对象之间的差异，目的是尽可能复用节点。

那么我们运行 diff (vnode,vnode2),就能知道 vnode 和 vnode2 之间的差异如下：

div 的 id 改为 app2span 的文本子节点 1 改为 2

知道了差异部分，我们就能更新视图了,伪代码如下

document.getElementById(“app”).setAttribute(‘id’, ‘app2’)// id 改为 app2
document.getElementById(“child”).firstChild.textContent =‘2’ //1 改为 2

再思考下,当我们改变一个节点的时候，我们其实主要改了以下部分

自身的属性（style 、class等等）子节点

那么 diff 算法可以抽象为 两部分

function diff(vnode,newVnode){
diffAttr(vnode.attr,newVnode.attr)
diffChildren(vnode.children,newVnode.children)
}

vue之前的源码是采用 先 diff，得到差异，然后根据差异在去 patch 真实 dom，也就是分两步骤

diffpatch

但是这样性能会有损失,因为 diff 过程中会遍历一次整棵树，patch 的时候又会遍历整棵树,其实这两次遍历可以合并成一次，也就是 在diff的同时进行patch

所以我们把流程改为

function patchVnode(oldVnode, vnode, parentElm){
patchAttr(oldVnode.attr, vnode.attr, parentElm)
patchChildren(parentElm, oldVnode.children, vnode.children)
}

patchAttr

function patchAttr(oldVnode = {}, vnode = {}, parentElm) {
each(oldVnode, (key, val) => { //遍历 oldVnode 看newTreeAttr 是否还有对应的属性
if (vnode[key]) {
val !== vnode[key] && setAttr(parentElm, key, vnode[key])
}
else {
parentElm.removeAttribute(key)
}
})

each(vnode, (key, val) => {//看 oldVnode 是否还有对应的属性，没有就新增
!oldVnode[key] && setAttr(parentElm, key, val)
})
}

function each(obj, fn) {//遍历对象
if (Object.prototype.toString.call(obj) !== ‘[object Object]’) {
console.error(‘只能遍历对象！’)
return
}

for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var val = obj[key];
fn(key, val)
}
}
}

function setAttr(node, key, value) {
switch (key) {
case ‘style’:
each(value, (key, val) => {
node.style[key] = val
})
break
case ‘value’:
var tag = node.tag || ‘’
tag = tag.toLowerCase()
if (
tag === ‘input’ || tag === ‘textarea’
) {
node.value = value
} else {
// if it is not a input or textarea, use setAttribute to set
node.setAttribute(key, value)
}
break
default:
node.setAttribute(key, value)
break
}
}

该函数主要做了两件事

遍历 oldVnode 看 newTreeAttr 是否还有对应的属性如果有并且不相等的，修改对应的属性， 没有的话，直接删除对应的属性遍历oldVnode, 是否还有对应的属性，没有就新增 

patchChildren

先看下源码

function patchChildren(parentElm, oldCh, newCh) {
let oldStartIdx = 0;
let oldEndIdx = oldCh.length - 1;
let oldStartVnode = oldCh[0];
let oldEndVnode = oldCh[oldEndIdx];

let newStartIdx = 0;
let newEndIdx = newCh.length - 1;
let newStartVnode = newCh[0];
let newEndVnode = newCh[newEndIdx];
let oldKeyToIdx, idxInOld, elmToMove, refElm;

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (!oldStartVnode) {
oldStartVnode = oldCh[++oldStartIdx];
} else if (!oldEndVnode) {
oldEndVnode = oldCh[–oldEndIdx];
}

else if (sameVnode(oldStartVnode, newStartVnode)) { //旧首 和 新首相同
  patchVnode(oldStartVnode.elm, oldStartVnode, newStartVnode);
  oldStartVnode = oldCh[++oldStartIdx];
  newStartVnode = newCh[++newStartIdx];
}

else if (sameVnode(oldEndVnode, newEndVnode)) { //旧尾 和 新尾相同
  patchVnode(oldEndVnode.elm, oldEndVnode, newEndVnode);
  oldEndVnode = oldCh[--oldEndIdx];
  newEndVnode = newCh[--newEndIdx];
}

else if (sameVnode(oldStartVnode, newEndVnode)) { //旧首 和 新尾相同,将旧首移动到 最后面
  patchVnode(oldStartVnode.elm, oldStartVnode, newEndVnode);
  nodeOps.insertBefore(parentElm, oldStartVnode.elm, oldEndVnode.elm.nextSibling)//将 旧首 移动到最后一个节点后面
  oldStartVnode = oldCh[++oldStartIdx];
  newEndVnode = newCh[--newEndIdx];
}

else if (sameVnode(oldEndVnode, newStartVnode)) {//旧尾 和 新首相同 ,将 旧尾 移动到 最前面
  patchVnode(oldEndVnode.elm, oldEndVnode, newStartVnode);
  nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
  oldEndVnode = oldCh[--oldEndIdx];
  newStartVnode = newCh[++newStartIdx];
}

else {//首尾对比 都不 符合 sameVnode 的话
  //1. 尝试 用 newCh 的第一项在 oldCh 内寻找 sameVnode
  let elmToMove = oldCh[idxInOld];
  if (!oldKeyToIdx) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
  idxInOld = newStartVnode.key ? oldKeyToIdx[newStartVnode.key] : null;
  if (!idxInOld) {//如果 oldCh 不存在 sameVnode 则直接创建一个
    nodeOps.createElm(newStartVnode, parentElm);
    newStartVnode = newCh[++newStartIdx];
  } else {
    elmToMove = oldCh[idxInOld];
    if (sameVnode(elmToMove, newStartVnode)) {
      patchVnode(elmToMove, newStartVnode);
      oldCh[idxInOld] = undefined;
      nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm);
      newStartVnode = newCh[++newStartIdx];
    } else {
      nodeOps.createElm(newStartVnode, parentElm);
      newStartVnode = newCh[++newStartIdx];
    }
  }
}

}

if (oldStartIdx > oldEndIdx) {
refElm = (newCh[newEndIdx + 1]) ? newCh[newEndIdx + 1].elm : null;
nodeOps.addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx);
} else if (newStartIdx > newEndIdx) {
nodeOps.removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
}

}

上述代码的本质是找出两个数组的差异

举个栗子

旧数组 [a,b,c,d]

新数组 [e,f,g,h]

怎么找出新旧数组之间的差异呢？ 我们约定以下名词 - 旧首（旧数组的第一个元素） - 旧尾（旧数组的最后一个元素） - 新首（新数组的第一个元素） - 新尾（新数组的最后一个元素）

一些工具函数

-sameVnode--用于判断节点是否应该复用,这里做了一些简化，实际的diff算法复杂些，这里只用tag 和 key 相同，我们就复用节点，执行patchVnode，即对节点进行修改

function sameVnode(a, b) {
return a.key === b.key && a.tag === b.tag
}

createKeyToOldIdx--建立key-index的索引,主要是替代遍历，提升性能 

function createKeyToOldIdx(children, beginIdx, endIdx) {
let i, key
const map = {}
for (i = beginIdx; i <= endIdx; ++i) {
key = children[i].key
if (isDef(key)) map[key] = i
}
return map
}

旧首 和 新首 对比

if (sameVnode(oldStartVnode, newStartVnode)) {
patchVnode(oldStartVnode.elm, oldStartVnode, newStartVnode);
oldStartVnode = oldCh[++oldStartIdx];
newStartVnode = newCh[++newStartIdx];
}

旧尾 和 新尾 对比

if (sameVnode(oldEndVnode, newEndVnode)) { //旧尾 和 新尾相同
patchVnode(oldEndVnode.elm, oldEndVnode, newEndVnode);
oldEndVnode = oldCh[–oldEndIdx];
newEndVnode = newCh[–newEndIdx];
}

旧首 和 新尾 对比

if (sameVnode(oldStartVnode, newEndVnode)) { //旧首 和 新尾相同,将旧首移动到 最后面
patchVnode(oldStartVnode.elm, oldStartVnode, newEndVnode);
nodeOps.insertBefore(parentElm, oldStartVnode.elm, oldEndVnode.elm.nextSibling)
oldStartVnode = oldCh[++oldStartIdx];
newEndVnode = newCh[–newEndIdx];
}

旧尾 和 新首 对比,将 旧尾 移动到 最前面

if (sameVnode(oldEndVnode, newStartVnode)) {//旧尾 和 新首相同 ,将 旧尾 移动到 最前面
patchVnode(oldEndVnode.elm, oldEndVnode, newStartVnode);
nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
oldEndVnode = oldCh[–oldEndIdx];
newStartVnode = newCh[++newStartIdx];
}

首尾对比 都不 符合 sameVnode 的话
    尝试 用 newCh 的第一项在 oldCh 内寻找 sameVnode,如果在 oldCh 不存在对应的 sameVnode ，则直接创建一个，存在的话则判断
        符合 sameVnode，则移动 oldCh 对应的 节点不符合 sameVnode ,创建新节点


最后 通过 oldStartIdx > oldEndIdx ，来判断 oldCh 和 newCh 哪一个先遍历完成

oldCh 先遍历完成,则证明 newCh 还有多余节点，需要新增这些节点newCh 先遍历完成,则证明 oldCh 还有多余节点，需要删除这些节点

总结

diff 算法的本质是找出两个对象之间的差异diff 算法的核心是子节点数组对比,思路是通过 首尾两端对比key 的作用 主要是
    决定节点是否可以复用建立key-index的索引,主要是替代遍历，提升性能