Question

虚拟DOM（Virtual DOM）的工作原理

Answer 1

1. 为什么需要虚拟DOM

先介绍浏览器加载一个网页需要经历那些过程；我们只讨论页面解析流程，不考虑网络请求过程。

浏览器内核拿到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 会对属性进行重设从而实现节点的转换。