一、真实DOM和其解析流程
浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting
第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。
第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。
第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。
第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。
第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。
DOM树的构建是文档加载完成开始的？构建DOM数是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。
Render树是DOM树和CSSOM树构建完毕才开始构建的吗？这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。
CSS的解析是从右往左逆向解析的(从DOM树的下－上解析比上－下解析效率高)，嵌套标签越多，解析越慢。
webkit渲染引擎工作流程
二：为什么要用虚拟DOM
1.操作dom元素需要把html结构销毁之后,然后再进行重新生成,十分消耗性能
2.虚拟dom,通过diff算法,减少性能的消耗
vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。
一棵真实DOM树的渲染需要先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上，
而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。
用传统jquery操作dom的思想，可以先删除,然后再插入新的标签
虚拟dom会如何处理上述问题呢？
第一步：通过树的形式保存旧的dom信息，这些信息可能在页面第一次加载的时候被渲染到浏览器中，但仍是通过虚拟dom的方式创建的
第二步：检测到数据更新，需要更新dom，先在JavaScript中将需要修改的节点全部修改完成
第三步：将最终生成的虚拟DOM更新到视图中去。
用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。
三：实现虚拟DOM
例子：
<h1>{{ blogTitle }}</h1>render: function (createElement) {
return createElement('h1', this.blogTitle)
}