先介绍浏览器加载一个网页需要经历那些过程；我们只讨论页面解析流程，不考虑网络请求过程。
浏览器内核拿到html文件后，大致分为一下5个步骤：
1. 解析html元素，构建dom 树
2. 解析CSS，生成页面css规则树（Style Rules）
3. 将dom树 和 css规则树关联起来，生成render树
4. 布局（layout/ reflow），浏览器会为Render树上的每个节点确定在屏幕上的尺寸、位置
5. 绘制Render树，绘制页面像素信息到屏幕上，这个过程叫paint
当你用原生js 或jquery等库去操作DOM时，浏览器会从构建DOM树开始讲整个流程执行一遍，所以频繁操作DOM会引起不需要的计算，导致页面卡顿，影响用户体验。而Virtual DOM能很好的解决这个问题。它用javascript对象表示virtual node(VNode)，根据VNode 计算出真实DOM需要做的最小变动，然后再操作真实DOM节点，提高渲染效率。
2. Virtual DOM
虚拟DOM用javascript对象来表示VNode，VNode的结构如下：
虚拟节点（vNode）结构
下面是虚拟DOM的算法流程图：
虚拟DOM算法流程图
React Diff算法
高效的diff算法能够保证进行对实际的DOM进行最小的变动。但是 标准的的 Diff 算法 复杂度需要 O(n^3)，这显然无法满足性能要求。要达到每次界面都可以整体刷新界面的目的，势必需要对算法进行优化。React里结合 Web 界面的特点做出了两个简单的假设，使得 Diff 算法复杂度直接降低到 O(n)。
1. 两个相同组件产生类似的 DOM 结构，不同的组件产生不同的 DOM 结构；
2. 对于同一层次的一组子节点，它们可以通过唯一的 id 进行区分。
算法上的优化是 React 整个界面 Render 的基础，保证了整体界面渲染的性能。
不同节点类型的比较
为了在树之间进行比较，我们首先要能够比较两个节点，在 React 中即比较两个虚拟 DOM 节点，当两个节点不同时，应该如何处理。这分为两种情况：（1）节点类型不同 ，（2）节点类型相同，但是属性不同。
节点类型不同：直接删除原节点， 插入新节点。
React 的 DOM Diff 算法实际上只会对树进行逐层比较，两棵树只会对同一层次的节点进行比较如下所述。
dom树
React 只会对相同颜色方框内的 DOM 节点进行比较，即同一个父节点下的所有子节点。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。
相同类型节点的比较
React 会对属性进行重设从而实现节点的转换。
形象一点说就是，html相当于人里面的器官，组成了人体；而Css就是你穿着的衣服，即使html网页结构相同，但是如果你的css变化的话整个网页也
是可以变化的，而js就是发蜡，香水之类的可以使你的网页更加丰富的脚本语言；整个网页就是人体，衣服，香水发蜡结合的结果了。dom树是根据网页的标签的层级关系来说的,可参考遗传学的那种关系.
换句话说:
html是网页的结构，css是网页的表达形式，JS是脚本语言；
想想一棵树是什么样子就好了。html代码里面每一个标签都是dom的一个结点，每个结点可以包含其它结点，类似树干上可以长其它树干。
一个小蚂蚁，从树根开始，一点点往上爬，它可以到达树木的任意一个地方。
dom树也是的，从根标签html开始算起，可以查找到当前页面内的任意一个标签。
可以考虑css后代选择器。
比如jquery下：
$('html body article section span') 表示的是dom树上文章第一段里面的span标签节点。
javascript里面有dom操作，就是你必须要选中树上的某一个元素（可以是最外围的叶子，也可以是某条枝干），选中了之后才能对它进行下一步的操作。
