DOM被表示为树结构，每次DOM中的某些内容都会发生变化，因此对DOM的更改非常快，但更改后的元素，并且它的子项必须经过Reflow / Layout阶段，然后浏览器必须重新绘制更改，这很慢的。因此，回流/重绘的次数越多，您的应用程序就越卡顿。但是，Javascript运行速度很快，虚拟DOM是放在JS 和 HTML中间的一个层。它可以通过新旧DOM的对比，来获取对比之后的差异对象，然后有针对性的把差异部分真正地渲染到页面上，从而减少实际DOM操作，最终达到性能优化的目的。

虚拟dom原理流程 简单概括有三点：

用JavaScript模拟DOM树，并渲染这个DOM树 比较新老DOM树，得到比较的差异对象 把差异对象应用到渲染的DOM树。 下面是流程图： segmentfault.com/img/bVbh0ZL…

用JavaScript模拟DOM树并渲染到页面上 其实虚拟DOM，就是用JS对象结构的一种映射，下面我们一步步实现这个过程。

我们用JS很容易模拟一个DOM树的结构，例如用这样的一个函数createEl(tagName, props, children)来创建DOM结构。

tagName标签名、props是属性的对象、children是子节点。 然后渲染到页面上，代码如下:

const createEl = (tagName, props, children) => new CreactEl(tagName, props, children)

const vdom = createEl('div', { 'id': 'box' }, [ createEl('h1', { style: 'color: pink' }, ['I am H1']), createEl('ul', {class: 'list'}, [createEl('li', ['#list1']), createEl('li', ['#list2'])]), createEl('p', ['I am p']) ])

const rootnode = vdom.render() document.body.appendChild(rootnode)

通过上面的函数，调用vdom.render()这样子我们就很好的构建了如下所示的一个DOM树，然后渲染到页面上

下面我们看看CreactEl.js代码流程：

import { setAttr } from './utils' class CreateEl { constructor (tagName, props, children) { // 当只有两个参数的时候 例如 celement(el, [123]) if (Array.isArray(props)) { children = props props = {} } // tagName, props, children数据保存到this对象上 this.tagName = tagName this.props = props || {} this.children = children || [] this.key = props ? props.key : undefined

let count = 0
this.children.forEach(child => {
  if (child instanceof CreateEl) {
    count += child.count
  } else {
    child = '' + child
  }
  count++
})
// 给每一个节点设置一个count
this.count = count

} // 构建一个 dom 树 render () { // 创建dom const el = document.createElement(this.tagName) const props = this.props // 循环所有属性，然后设置属性 for (let [key, val] of Object.entries(props)) { setAttr(el, key, val) } this.children.forEach(child => { // 递归循环 构建tree let childEl = (child instanceof CreateEl) ? child.render() : document.createTextNode(child) el.appendChild(childEl) }) return el } } 上面render函数的功能是把节点创建好，然后设置节点属性，最后递归创建。这样子我们就得到一个DOM树，然后插入(appendChild)到页面上。