浏览器渲染引擎工作流程：创建DOM-->创建stypeRules-->创建Render树-->布局Layout-->绘制Painting

1：使用HTML解析器（调用XML解析器）解析HTML文档，将各个HTML元素逐个转化成DOM节点，构建DOM树

2：CSS的解析，分析css文件和元素上的样式，转化为CSS对象，将这些CSS对象组装起来，生成页面样式表

3：将DOM树和样式表关联起来，构建Render树（每个DOM节点都有attach方法，接受样式信息，返回一个render对象）

4：浏览器开始布局，转化为像素，显示出精确坐标

5：坐标和Render都存在，就调用paint进行绘制，构建出界面

操作真是DOM，浏览器会从构建树从头->尾执行一遍，会立即执行改变，如果多次，那么就会不停的重复执行，频繁操作会出现页面卡顿，影响体验

在vue2.0版本中，引入了 Virtual DOM 的概念，其实就是以js对象（VNode节点）作为基础来模拟DOM结构的树形结构，

一：属性

1：标签名（tag）

2：属性（attrs）

3：子元素对象（children）

二：作用

主要是将虚拟节点渲染到视图上,避免不必要的DOM操作,将虚拟节点和上一次渲染的虚拟旧节点对比，避免大量的回流重回操作，找到真正更新的地方，映射成真实的DOM，让浏览器去执行

三：做什么

1：提供和真是DOM节点嗦对应的虚拟节点Vnode

2:将虚拟节点Vnode和旧的虚拟节点oldVnode对比，然后更新视图

四：好处

1：具备跨平台优势，Virtual DOM 是以JavaScript对象为基础而不依赖真实平台环境

2：操作DOM慢，但是js运行速度快，最大程度减少DOM操作，Vritual DOM本质上就是在JS和DOM之间做了一个缓存，JS只操作Virtual DOM，最后把变更写入到真实DOM

3：提高渲染性能，Virtual DOM在大量、频繁的数据能进行合理的更新