Render函数之一《什么是虚拟DOM》

0.前言

虚拟DOM概念随着react的诞生而诞生，由facebook提出，其卓越的性能很快得到广大开发者的认可；继react之后vue2.0也在其核心引入了虚拟DOM的概念。

1.真实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方法，把它们绘制出来。 

   原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。

操作DOM的代价仍旧是昂贵的，频繁操作还