VirtualDOM是react在组件化开辟场景下，针对DOM重排重绘机能瓶颈作出的重要优化计划，而他最具代价的中心功用是怎样辨认并保留新旧节点数据组织之间差别的要领，也等于diff算法。毫无疑问的是diff算法的庞杂度与效力是决议VirtualDOM能够带来机能提拔结果的关键因素。因而，在VirtualDOM计划被提出今后，社区中不停涌现出对diff的革新算法，援用司徒正美的典范引见：

最最先典范的深度优先遍历DFS算法，其庞杂度为O(n^3)，存在奋发的diff本钱，然后是cito.js的横空出世，它对今后一切假造DOM的算法都有严重影响。它采纳两头同时举行比较的算法，将diff速率拉高到几个条理。紧随其后的是kivi.js，在cito.js的基出提出两项优化计划，应用key完成挪动追踪及基于key的编辑长度间隔算法应用（算法庞杂度 为O(n^2)）。但如许的diff算法太甚庞杂了，因而后来者snabbdom将kivi.js举行简化，去掉编辑长度间隔算法，调解两头比较算法。速率略有丧失，但可读性大大提高。再今后，就是有名的vue2.0 把snabbdom全部库整合掉了。

因而如今VirtualDOM的主流diff算法趋势一致，在重要diff思路上，snabbdom与react的reconilation体式格局基础雷同。

virtual dom中心头脑

假如没有邃晓virtual dom的构建头脑,那末你能够参考这篇细腻文章Boiling React Down to a Few Lines in jQuery
virtual dom优化开辟的体式格局是：经由历程vnode,来完成无状况组件,连系单向数据流(undirectional data flow),举行UI更新,团体代码组织是：

var newVnode = render(vnode, state)
var oldVnode = patch(oldVnode, newVnode)
state.dispatch('change')
var newVnode = render(vnode, state)
var oldVnode = patch(oldVnode, newVnode)

virtual dom库挑选

在浩瀚virtual dom库中,我们挑选snabbdom库,缘由有许多：

1.snabbdom机能排名靠前,虽然这个benchmark的参考性不高
2。snabbdom示例雄厚
3.snabbdom具有肯定的生态圈,如motorcycle.js,cycle-snabbdom,cerebral
4.snabbdom完成的异常文雅,应用的是recursive体式格局挪用patch,对照infernojs优化陈迹显著的代码,snabbdom更易读。
5.在浏览历程当中发明,snabbdom的模块化,插件支撑做得极佳

snabbdom的工作体式格局

我们来检察snabbdom基础应用体式格局。

// snabbdom在./snabbdom.js
var snabbdom = require('snabbdom')
// 初始化snabbdom,获得patch。随后,我们能够看到snabbdom设想的精巧的地方
var patch = snabbdom.init([
  require('snabbdom/modules/class'),
  require('snabbdom/modules/props'),
  require('snabbdom/modules/style'),
  require('snabbdom/modules/eventlisteners')
])
// h是一个天生vnode的包装函数,factory形式？对天生vnode更邃密的包装就是应用jsx
// 在工程里,我们一般应用webpack或许browserify对jsx编译
var h = require('snabbdom/h')
// 组织一个virtual dom,在现实中,我们一般愿望一个无状况的vnode
// 而且我们经由历程state来制造vnode
// react应用具有render要领的对象来作为组件,这个组件能够接收props和state
// 在snabbdom内里,我们一样能够完成相似结果
// function component(state){return h(...)}
var vnode = 
  h(
    'div#container.two.classes', 
    {on: {click: someFn}}, 
    [ 
      h('span', {style: {fontWeight: 'bold'}}, 'This is bold'), 
      ' and this is just normal text', 
      h('a', {props: {href: '/foo'}}, 
      'I\'ll take you places!')
    ]
  )
// 获得初始的容器,注重container是一个dom element
var container = document.getElementById('container')
// 将vnode patch到container中
// patch函数会对第一个参数做处置惩罚,假如第一个参数不是vnode,那末就把它包装成vnode
// patch事后,vnode发生变化,代表了如今virtual dom的状况
patch(container, vnode)
// 建立一个新的vnode
var newVnode = 
  h(
    'div#container.two.classes', 
    {on: {click: anotherEventHandler}}, 
    [ 
      h('span', {style: {fontWeight: 'normal', fontStyle: 'italics'}},
      'This is now italics'), 
      ' and this is still just normal text', 
      h('a', {props: {href: '/bar'}}, 'I\'ll take you places!')
    ]
  )
// 将新的vnode patch到vnode上,如今newVnode代表vdom的状况
patch(vnode, newVnode)

vnode的定义

浏览vdom完成,起首弄清楚vnode的定义

vnode的定义在./vnode.js中 vnode具有的属性

1.tagName 能够是custom tag,能够是’div’,’span’,etc,代表这个virtual dom的tag name
2.data, virtual dom数据,它们与dom element的prop、attr的语义相似。然则virtual dom包括的数据能够更天真。
比方应用./modules/class.js插件,我们在data内里轻松toggle一个类名

h(‘p’, {class: {‘hide’: hideIntro}})

• text, 对应element.textContent,在children里定义一个string,那末我们会为这个string建立一个textNode
• elm, 对dom element的援用
• key,用于提醒children patch历程,随后将细致申明

h参数

随后是h函数的包装

h的完成在./h.js

包装函数一共注重三点

• 对svg的包装,建立svg须要namespace
• 将vdom.text一致转化为string范例
• 将vdom.children中的string element转化为textNode

与dom api的对接

完成在./htmldomapi.js

采纳adapter形式,对dom api举行包装,然后将htmldomapi作为默许的浏览器接口
这类设想很机灵。在扩大snabbdom的兼容性的时刻,只须要转变snabbdom.init应用的浏览器接口,而不必转变patch等要领的完成

snabbdom的patch剖析

snabbdom的中心内容完成在./snabbdom.js。snabbdom的中心完成不到三百行(233 sloc),异常简短。

在snabbdom内里完成了snabbdom的virtual dom diff算法与virtual dom lifecycle hook支撑。
virtual dom diff
vdom diff是virtual dom的中心算法,snabbdom的完成道理与react官方文档Reconciliation一致
总结起来有：

• 对两个树组织举行完全的diff和patch,庞杂度增进为O(n^3),险些不可用
• 对两个数组织举行启示式diff,将大大节约开支

一篇浏览量颇丰的文章React’s diff algorithm也申明的就是启示历程,惋惜,没有现实的代码参照。如今,我们依据snabbdom代码来看启示划定规矩的应用,完毕后,你会邃晓virtual dom的完成有多简朴。

起首来到snabbdom.js中init函数的return语句

return function(oldVnode, vnode) {
  var i, elm, parent;
  // insertedVnodeQueue存在于全部patch历程
  // 用于网络patch中新插进去的vnode
  var insertedVnodeQueue = [];
  // 在举行patch之前,我们须要运转prepatch hook
  // cbs是init函数变量,即,这个return语句中函数的闭包
  // 这里,我们不剖析lifecycle hook,而只关注vdom diff算法
  for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();

  // 假如oldVnode不是vnode(在第一次挪用时,oldVnode是dom element)
  // 那末用emptyNodeAt函数来将其包装为vnode
  if (isUndef(oldVnode.sel)) {
    oldVnode = emptyNodeAt(oldVnode);
  }
  
  // sameVnode是上述“值不值得patch”的中心
  // sameVnode完成很简朴,检察两个vnode的key与sel是不是离别雷同
  // ()=>{vnode1.key === vnode2.key && vnode1.sel === vnode2.
  // 比较语义差别的组织没有意义,比方diff一个'div'和'span'
  // 而应当移除div,依据span vnode插进去新的span
  // diff两个key不雷同的vnode一样没有意义
  // 指定key就是为了辨别element
  // 关于差别key的element,不该当去依据newVnode来转变oldVnode的数据
  // 而应当移除不再oldVnode,增加newVnode
  if (sameVnode(oldVnode, vnode)) {
    // oldVnode与vnode的sel和key离别雷同,那末这两个vnode值得去比较
    //patchVnode依据vnode来更新oldVnode
    patchVnode(oldVnode, vnode, insertedVnodeQueue);
  } else {
    //不值得去patch的,我们就暴力点
    // 移除oldVnode,依据newVnode建立elm,并增加至parent中
    elm = oldVnode.elm;
    parent = api.parentNode(elm);

    // createElm依据vnode建立element
    createElm(vnode, insertedVnodeQueue);

    if (parent !== null) {
      // 将新建立的element增加到parent中
      api.insertBefore(parent, vnode.elm, api.nextSibling(elm));
      // 同时移除oldVnode
      removeVnodes(parent, [oldVnode], 0, 0);
    }
  }

  // 完毕今后,挪用插进去vnode的insert hook
  for (i = 0; i < insertedVnodeQueue.length; ++i) {
    insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);
  }

  // 全部patch完毕,挪用cbs中的post hook
  for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
  return vnode;
};
```

    ###然后我们浏览patch的历程

```
function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
  var i, hook;
  // 如前,在patch之前,挪用prepatch hook,然则这个是vnode在data里定义的prepatch hook,而不是全局定义的prepatch hook
  if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {
    i(oldVnode, vnode);
  }

  var elm = vnode.elm = oldVnode.elm, oldCh = oldVnode.children, ch = vnode.children;

  // 假如oldVnode和vnode援用雷同,则没必要比较。在优越设想的vdom里,大部分时候我们都在实行这个返回语句。
  if (oldVnode === vnode) return;
  // 假如两次援用差别,那申明新的vnode建立了
  // 与之前一样,我们先看这两个vnode值不值得去patch
  if (!sameVnode(oldVnode, vnode)) {
    // 这四条语句是不是与init返回函数里那四条雷同？
    var parentElm = api.parentNode(oldVnode.elm);
    elm = createElm(vnode, insertedVnodeQueue);
    api.insertBefore(parentElm, elm, oldVnode.elm);
    removeVnodes(parentElm, [oldVnode], 0, 0);
    return;
  }
  // 这两个vnode值得去patch
  // 我们先patch vnode,patch的要领就是先挪用全局的update hook
  // 然后挪用vnode.data定义的update hook
  if (isDef(vnode.data)) {
    for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
    i = vnode.data.hook;
    if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
  }
  // patch两个vnode的text和children
  // 检察vnode.text定义
  // vdom中划定,具有text属性的vnode不该当具有children
  // 关于<p>foo:<b>123</b></p>的优越写法是
  // h('p', [ 'foo:', h('b', '123')]), 而非
  // h('p', 'foo:', [h('b', '123')])
  if (isUndef(vnode.text)) {
    // vnode不是text node,我们再检察他们是不是有children
    if (isDef(oldCh) && isDef(ch)) {
      // 两个vnode都有children,那末就挪用updateChildren
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
    } else if (isDef(ch)) {
      // 只要新的vnode有children,那末增加vnode的children
      if (isDef(oldVnode.text)) api.setTextContent(elm, '');
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
    } else if (isDef(oldCh)) {
      // 只要旧vnode有children,那末移除oldCh
      removeVnodes(elm, oldCh, 0, oldCh.length - 1);
    } else if (isDef(oldVnode.text)) {
      // 二者都没有children,而且oldVnode.text不为空,vnode.text未定义,则清空elm.textContent
      api.setTextContent(elm, '');
    }
  } else if (oldVnode.text !== vnode.text) {
    // vnode是一个text node,我们转变对应的elm.textContent
    // 在这里我们应用api.setText api
    api.setTextContent(elm, vnode.text);
  }
  if (isDef(hook) && isDef(i = hook.postpatch)) {
    i(oldVnode, vnode);
  }
}

patch的完成是不是简朴明了？甚至有以为“啊？这就patch完了”的觉得。固然,我们还差末了一个,这个是重头戏——updateChildren。

末了浏览updateChildren*

updateChildren的代码较长且麋集,然则算法异常简朴
oldCh是一个包括oldVnode的children数组,newCh同理
我们先遍历两个数组(while语句),保护四个变量

• 遍历oldCh的头索引 – oldStartIdx
• 遍历oldCh的尾索引 – oldEndIdx
• 遍历newCh的头索引 – newStartIdx
• 遍历newCh的尾索引 – newEndIdx

当oldStartIdx > oldEndIdx或许newStartIdx > newOldStartIdx的时刻住手遍历。

遍历历程当中有五种比较
前四种比较

• oldStartVnode和newStartVnode,二者elm相对位置稳定,若值得(sameVnode)比较,这patch这两个vnode
• oldEndVnode和newEndVnode,同上,elm相对位置稳定,做雷同patch检测
• oldStartVnode和newEndVnode,假如oldStartVnode和newEndVnode值得比较,申明oldCh中的这- – oldStartVnode.elm向右挪动了。那末实行api.insertBefore(parentElm,oldStartVnode.elm, api.nextSibling(oldEndVnode.elm))调解它的位置
• oldEndVnode和newStartVnode,同上,但这是oldVnode.elm向左移,须要调解它的位置

末了一种比较

应用vnode.key,在ul>li*n的组织里,我们很有能够应用key来标志li的唯一性,那末我们就会来到末了一种状况。这个时刻,我们先发生一个index-key表(createKeyToOldIdx),然后依据这个表来举行变动。

变动划定规矩

假如newVnode.key不在表中,那末这个newVnode就是新的vnode,将其插进去
假如newVnode.key在表中,那末对应的oldVnode存在,我们须要patch这两个vnode,并在patch今后,将这个oldVnode置为undefined(oldCh[idxInOld] = undefined),同时将oldVnode.elm位置变换到当前oldStartIdx之前,以避免影响接下来的遍历

遍历完毕后,搜检四个变量,对移除盈余的oldCh或增加盈余的newCh
patch总结
浏览完init函数return语句,patch,updateChildren,我们能够邃晓全部diff和patch的历程

有些函数createElm,removeVnodes并不重要

lifecycle hook

浏览完virtual dom diff算法完成后,我们能够会新鲜,关于style、class、attr的patch在那里？这些完成都在modules,并经由历程lifecycle发挥作用
snabbdom的生命周期钩子函数定义在core doc – hook中。
再检察modules里的class会发明,class module经由历程两个hook钩子来对elm的class举行patch。这两个钩子是create和update。
回到init函数,这两个钩子在函数体开首注册

for (i = 0; i < hooks.length; ++i) {
  cbs[hooks[i]] = [];
  for (j = 0; j < modules.length; ++j) {
    if (modules[j][hooks[i]] !== undefined)
     cbs[hooks[i]].push(modules[j][hooks[i]]);
  }
}

create hook在createElm中挪用。createElm是唯一增加vnode的要领,所以insertedVnodeQueue.push只发生在createElm中。