虚拟DOM与DOM Diff 的原理

虚拟DOM

虚拟DOM是和真实DOM相互对应的

• 它是什么

一个能代表 DOM 树的对像，它通常含有标签名、标签上的属性、事件监听和子元素等，以及其他属性。

• 它有什么优点（为什么用它）

1、减少DOM的操作：

虚拟DOM 可以将多次操作和为一次操作，比如你添加1000个节点，是一个接一个操作的。（减少DOM操作的次数）

虚拟DOM借助DOM diff 可以把多余的操作省掉，比如你添加1000个节点，只有10个是新增的。（减少DOM操作的范围）

2、跨平台：

虚拟DOM不仅可以变成DOM，还可以变成小程序、IOS应用、安卓应用因为虚拟DOM本质上是一个JS对象。

• 它有什么缺点（为什么不用他）

需要额外创建函数，如createElement 或者 h，但可以通过JSX来简化成XML写法。

DOM diff

• 它是什么、有什么优点

DIFF算法在执行时有三个维度，分别是Tree DIFF、Component DIFF、Element DIFF，执行时按顺序依次执行，它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。

只比较同级是否相同，是进行下级比较，否 tag不同直接删除，创建新的；属性不同修改属性，继续比较

• 它有什么缺点

同级比较存在存在bug，必须添加key值，（不要用index做下标）

 

diff算法总结（5w1h）

what: 是一种对新旧虚拟DOM树进行比较，得出两者差异，确定最小DOM更新操作的算法。

why: 减少渲染真实DOM的开销，提高性能。

When: 页面更新，重新渲染时用到。

where: Vue中当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁。React在下一次 state 或 props 更新时， render()方法会返回一棵不同的树。在构建fiber时，标记effectTag为Placement、Update、Deletion等。在commitWork构建真实DOM时，按照effectTag规则生成DOM。

Who: Vue(patch、patchVnode、updateChildren)。React(reconcileChildFibers、reconcileChildrenArray、updateHostComponent等)。 how: 深度优先、同层比较。tag不同，生成树形结构不同。使用key来标识稳定节点。