虚拟dom

vue和react都有用到虚拟dom。虚拟dom有什么用？先来看下dom元素，dom是很慢的，咱们能够把dom元素里面的全部属性都打印出来看下

能够看到，一个元素就有几百个属性，这还仅仅是一个而已，真正的dom结构是很是庞大的，由于他们就是这么规定的，因此操做dom时要当心再当心，有时候操做不当可能就会成为杀死性能的罪魁祸首。这也是为何咱们常常说操做dom耗性能，不要常常操做dom结构的缘由。

相对于dom结构，用js对象结构处理是很是快的，dom树上的结构，属性，子节点都是能够经过js表示的。

var element = {
  tagName: 'ul', // 节点标签名
  props: { // DOM的属性，用一个对象存储键值对
    id: 'list'
  },
  children: [ // 该节点的子节点
    {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
  ]
}

既然能够用js对象结构来表示dom树，那么就能够根据js对象结构来构建一个dom树。

下面来简单说一下虚拟dom的实现原理

1.用js对象结构构建一个虚拟dom

2.根据虚拟dom生成真实的dom

3.dom上有状态变化的时候，生成一个新的虚拟dom

4.比较两个虚拟dom的差别

5.把差别应用到真正的dom上

做者：戴嘉华
连接：https://www.zhihu.com/question/29504639/answer/73607810
来源：知乎
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

// 1. 构建虚拟DOM
var tree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: blue'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li')])
])

// 2. 经过虚拟DOM构建真正的DOM
var root = tree.render()
document.body.appendChild(root)

// 3. 生成新的虚拟DOM
var newTree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: red'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li'), el('li')])
])

// 4. 比较两棵虚拟DOM树的不一样
var patches = diff(tree, newTree)

// 5. 在真正的DOM元素上应用变动
patch(root, patches)