Virtual Dom简述

一、Virtual Dom是啥？

就是普通的js对象
1、重新渲染有变化的dom，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能
2、这个对象描述了界面的渲染内容，配合不同的渲染工具，将使跨平台渲染成为可能。

二、Virtual Dom是怎么工作的

先看一下正常H5页面的渲染过程：
解析HTML —> 生成DOM —> CSSOM —> Layout —> Paint —> Compiler
虚拟dom将数据和dom绑定，指定更新需要更新的dom节点，降低频繁操作dom的消耗，就等于提升了性能

Vue怎么实现的？
一个Vue template，Vue帮你编译成AST（抽象语法树），每次render()时通过createElement()生成VNode，VNode组成了Virtual Dom，Vue会与上一次的Virtual Dom进行对比differ生成新的Virtual Dom，Vue通过update()再更新对应的dom

React怎么实现的？
React使用的是jsx语法，每次render()时通过babel将jsx语法转化成React.createElement()执行，产物就是Virtual Dom