深入理解虚拟DOM

我正在参加「掘金·启航计划」

定义

Virtual DOM（虚拟DOM，简称VDOM）是实现“根据自变量变化计算出UI变化”的一种主流技术

工作原理：

1. 将“元素描述的UI”转化为“VDOM描述的UI”;
2. 对比变化前后“VDOM 描述的UI”，计算出UI中发生变化的部分。

不同框架的VDOM

使用VDOM的不同框架大体遵循以上两个步骤，只是细节上有所区别。比如，Vue使用模板语法描述UI，模板语法编译为render 函数，其对应的两个步骤为：

1. render 函数执行后返回“VNode描述的UI ，这一步骤在Vue中被称为render。
2. 将变化前后“VNode描述的UI”进行比较，计算出UI中变化的部分，这一步骤在Vue中被称为patch。

React使用JSX描述UI，JSX编译为createElement方法，其对应的两个步骤为：

1. createElement方法执行后返回“React Element描述的UI”;
2. 将“React Element描述的UI”与变化前“FiberNode描述的UI”进行比较计算出UI中变化的部分，同时生成本次更新“FiberNode描述的UI”。

VDOM的优点

VDOM 的优点主要有三点

1. 相较于DOM的体积优势

我们可以通过document.createElement方法创建出来一个真实DOM，我们计算这个真实DOM的属性个数，在控制台打印出来如下：

const div = document.createElement('div');
let len = 0;
for(let key in div){
    len++;
}
console.log(len);
// 310

我们可以看到真实DOM有大量冗余的属性，使用“包含较少冗余属性的VDOM”进行diff算法比较可以减少不必要的性能开销

2. 相较于AOT 更强大的描述能力

AOT是什么

”编译”可以选择两个时机执行“

1. 代码在构建时，被称为AOT，宿主环境获得的是编译后的代码
2. 代码在宿主环境执行时，被称为JIT，代码在宿主环境中编译并执行

最大化AOT收益的前提是:“描述UI的代码”写法固定，可被静态分析，而“固定”意味着有限的描述能力。

比如，要在“使用模板语法的前端框架”中实现类似React的 children属性，需要实现Slot Component，对children的简单操作也变为对Slot Component的烦琐操作。一个典型的示例就是Vue框架。

3. 多平台渲染的抽象能力。

VDOM实质上其实是JavaScript对象，它不依赖与任何宿主环境，如浏览器，这使其具有跨平台的能力。

为VDOM对接不同的宿主环境，即可实现“一个框架，多端渲染”。

比如在React体系中，React核心代码位于React包中，VDOM相关代码位于ReactReconciler包中,不同宿主环境使用不同的包对接:

• 浏览器、Node.js宿主环境使用ReactDOM包。
• Native宿主环境使用 ReactNative包。
• Canvas，SVG宿主环境使用ReactArt 包。