vue中虚拟节点原理
https://github.com/vuejs/vue/blob/dev/src/core/vdom/vnode.js
待办项：
1）截取虚拟dom的方法出来，以及下面的四种diff
replace: 替换整个节点，某个节点值不一样
text：只是更新文本
reorder：移动／增加／删除 子节点
props：节点的属性变了
浏览器渲染引擎工作流程都差不多，大致分为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树的下－上解析比上－下解析效率高)， 嵌套标签越多，解析越慢。
原理：Vue框架的核心是虚拟DOM，编译template模板时要转译成VNode的函数，当用render函数构建DOM时，Vue就免去了转译的步骤。
当使用render函数描述虚拟DOM时，Vue提供一个函数： createElement ，这个函数是就构建虚拟DOM所需要的工具。它可以被简写为 h 。
render函数的返回值是VNode（虚拟节点），本质上的是 createElement 函数生成的VNode。
render是渲染的意思。
res.render(file,option)是express中专门渲染视图用的，首先你要在你的app.js或者index.js中设置一下渲染引擎，比如html,jade,handlebars(我自己使用的)，mustache等。然后将视图模板的文件位置放入file,将传入的模板数据放入option对象中，模板引擎就能自己渲染出视图。给你推荐一个npm模块，express-handlebars，能很快搭建一个项目，你实践过，就能明白res.render.
而渲染，就是这样一个过程，浏览器根据页面的html代码、css定义、javascript脚本的操作，在浏览器上按照一定的规范(传说中的 DOCTYPE )显示出相应的内容。
举个最简单的例子：
<b>这个是粗体显示</b>
浏览器根据上面的代码在浏览器上面显示出粗体的文字，这个过程就叫渲染
