目录
保证性能下限制:框架的虚拟DOM需要适配任何上层的API可能产生的操作,所以它的一些DOM操作必须是普适的,性能达不到最优;但是相比较直接操作DOM,还是可以提供不错的性能;
虚拟DOM除了可以渲染成DOM节点,还可以渲染到其他平台如ssr(nuxt.js/next.js)、原生应用(weex/rn)、小程序等,增加了跨平台能力
一、定义
DOM:文档对象模型(DOM)是一个独立于语言的,用于操作XML和HTML文档的接口程序(API)。
虚拟DOM:所谓虚拟DOM,也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点,然后再通过特定的Render方法将其渲染成真实的DOM节点。
- 本质:用JS对象,来模拟DOM元素和嵌套关系。
- 目的:为了实现页面元素的高效更新。
注:虚拟DOM是相对真实DOM而言的,在React,Vue等技术栈出现之前,我们要改变页面元素只能通过遍历查询DOM树的方式找到需要修改的DOM,然后修改样式或者结构,来达到更新UI的目的。这种方式相当消耗计算资源,因为每次查询DOM几乎都需要遍历整颗DOM树,如果建立一个与DOM树对应的虚拟DOM对象( js 对象),以对象嵌套的方式来表示DOM树及其层级结构,那么每次DOM的更改就变成了对 js 对象的属性的增删改查,这样一来查找 js 对象的属性变化要比查询 dom 树的性能开销小。
二、虚拟DOM的作用(优点)
-
保证性能下限制:框架的虚拟DOM需要适配任何上层的API可能产生的操作,所以它的一些DOM操作必须是普适的,性能达不到最优;但是相比较直接操作DOM,还是可以提供不错的性能;
-
无需手动操作DOM;
-
虚拟DOM除了可以渲染成DOM节点,还可以渲染到其他平台如ssr(nuxt.js/next.js)、原生应用(weex/rn)、小程序等,增加了跨平台能力。
三、虚拟DOM的使用基本流程(前四步骤)
- 获取数据
- 创建虚拟DOM
- 通过Render函数解析jsx,将其转换成虚拟DOM结构
- 将虚拟DOM渲染成真实DOM
- 数据更改
- 使用Diff算法进行对比,生成patch对象
- 根据key将patch对象渲染到页面改变的结构上,而其他没有改变的地方是不做任何修改的(虚拟DOM的惰性原则)
四、Diff算法
- 定义:Diff算法作为虚拟DOM的加速器,其算法的改进优化是React整个页面渲染的基础和性能的保障。Diff算法运行结束后返回一个key值。
- 作用:用于比较两个新旧虚拟DOM树的差异,比较完之后会得到一个差异对象,我们称之为patch补丁对象,比较之后会出现以下四种情况:
1、此节点是否被移除——>添加新的节点;
2、属性是否被改变——>旧属性改为新属性;
3、文本内容是否被改变——>旧内容改为新内容;
4、节点要被整个替换——>结构完全不相同,移除并整个替换。 - 传统Diff:计算一棵树形结构转换为另一棵树形结构需要的最少步骤,如果使用传统Diff算法通过循环递归遍历节点进行对比,其复杂度要达到O(n^3),其中n是节点总数,效率十分低下。
- React中Diff算法的优化:基于三个策略,react分别对tree diff,component diff,element diff进行算法优化。
- Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计。(tree diff)
- 拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结。(component diff)
- 对于同一层级的一组子节点,它们可以通过唯一ID进行区分。(element diff)
-
tree diff
React对虚拟DOM树进行层级控制,只会对相同层级的DOM节点进行比较,即同一个父元素下的所有子节点,当发现节点已经不存在了,则会删除掉该节点下所有的子节点,不会再进行比较。这样只需要对DOM树进行一次遍历,就可以完成整个树的比较,复杂度变为O(n);
当出现节点跨层级移动时,并不会出现想象中的移动操作,而是会进行删除并重新创建的动作,这是一种很影响React性能的操作。因此官方也不建议进行DOM节点跨层级的操作。
-
componnet diff
如果是同一个类型的组件,则按照原策略进行虚拟DOM比较。
如果不是同一类型的组件,则将其判断为dirty component,替换整个组价下的所有子节点。
如果是同一个类型的组件,有可能经过一轮虚拟DOM比较下来,并没有发生变化。如果我们能够提前确切知道这一点,那么就可以省下大量的diff运算时间。因此,React允许用户通过shouldComponentUpdate()来判断该组件是否需要进行diff算法分析。
-
element diff
INSERT_MARKUP(插入):新的组件类型不在旧集合中,即全新的节点,需要对新节点进行插入操作。
MOVE_EXISTING(移动):旧集合中有新组件类型,且element是可更新的类型,这时候就需要做移动操作,可以复用以前的DOM节点。
REMOVE_NODE(删除):旧组件类型,在新集合里也有,但对应的element不同则不能直接复用和更新,需要执行删除操作,或者旧组件不在新集合里的,也需要执行删除操作。