深入理解虚拟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 包。

原文链接:https://juejin.cn/post/7233695223402168377 作者:十七喜欢前端

(0)
上一篇 2023年5月17日 上午10:37
下一篇 2023年5月17日 上午10:48

相关推荐

发表评论

登录后才能评论