## 真实DOM和其解析流程 浏览器渲染引擎工作流程都差不多，大致分为5步，**创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting** *   1，用HTML分析器，分析HTML元素，**构建一颗DOM树**(标记化和树构建)。 * 2，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。 *     3，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有**attach方法，接受样式信息**，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。 *     4，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。 *     5，Render树和节点显示坐标都有了，就调用每个节点**paint方法，把它们绘制**出来。 1. **DOM树的构建是文档加载完成开始的？** 构建DOM数是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。**它不必**等到整个HTML文档解析完毕之后才开始构建render数和布局。 2.     **Render树是DOM树和CSSOM树构建完毕才开始构建的吗？** 这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。 3.     **CSS的解析是从右往左逆向解析的** (从DOM树的下－上解析比上－下解析效率高)，**嵌套标签越多，解析越慢。**  ## 虚拟DOM的好处  虚拟DOM就是为了**解决浏览器性能问题**而被设计出来的。 **如前**，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。 **所以，**用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。 * 无需手动操作`Dom`：框架会根据虚拟`Dom`和数据的双向绑定，帮我们更新视图，提高开发效率 * 跨平台：虚拟`Dom`本质上是`JavaScript`对象，而真实`Dom`与平台相关，相比下虚拟`Dom`可以更好地跨平台操作 * 提升渲染性能 Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。 ## 虚拟Dom的实现原理 虚拟`Dom`的实现原理主要包括以下三部分： * 用`JavaScript`对象模拟真实`Dom`树，对真实`Dom`进行抽象 * 通过`diff`算法对两颗虚拟`Dom`对象进行比较 * 通过`patch`算法将两个虚拟`Dom`对象的差异应用到真实`Dom`树上