虚拟 DOM 和 DOM diff

一、虚拟 DOM 是什么

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

二、虚拟DOM的优点

1.减少DOM操作

• 虚拟DOM可以将多次操作合并为一次操作，比如你添加1000个节点，却是一个接着一个操作的（减少频率）
• 虚拟DOM借助DOM diff可以把多余的操作省掉，比如你添加 1000 个节点，其实只有10个是新增的（减少范围）

2.跨平台

• 虚拟DOM不仅可以变成DOM，还可以变成小程序、iOS应用、安卓应用，因为虚拟DOM本质上只是一个JS对象，也正因如此，它并不依赖真实平台环境，所以使它具有了跨平台的能力。

三、虚拟DOM的缺点

需要额外的创建函数，如createElement（react）或h（vue），但是可以通过JSX来简化成XML写法，依靠babel或vue-loader，将其转译成浏览器可以执行代码，这种方式严重依赖打包工具。

无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。

四、DOM diff 是什么

虚拟DOM的对比算法，当数据发生变化时，它会去对比前后的 DOM ，查找哪些地方发生了变化，然后返回需要改变的操作。

• 就是一个函数，我们称之为patch
• patches = patch(oldVNode,newVNode)
• patches 就是要运行的DOM操作，可能是这样:

[
	{type: 'INSERT',vNode: ... },
	{type: 'TEXT',vNode: ... },
	{type: 'PROPS',propsPatch: [...]}
]

先横向遍历哪些是可疑的节点，再做更新操作（大概逻辑如下：）

1. Tree diff

• 将新旧两棵树逐层对比，找出哪些节点需要更新
• 如果节点是组件就看 Component diff
• 如果节点是标签就看 Element diff

2. Component diff

• 如果节点是组件，就先看组件类型
• 类型不同直接替换（删除旧的）
• 类型相同则只更新属性
• 然后深入组件做 Tree diff（递归）

3. Element diff

• 如果节点是原生标签，则看标签名
• 标签名不同直接替换，相同则只更新属性
• 然后进入标签后代做 Tree diff（递归）

五、DOM diff的优点

1.减少DOM操作 2.跨平台

六、DOM diff的缺点

同级节点对比存在bug

当删除div下第1个（左边）子元素时：（第二个子元素成为了第一个，它们并不知道自己的位置）

计算机思维和人类的方式不同！！！

DOM diff发现

• div 没变，不用更新
• 子元素1标签没变，但是children变了，更新了DOM内容
• 子元素2不见了，删除对应的DOM

解决这类问题的方式（React和Vue）：

通过添加上key，须是唯一值。但是最好不要用index，index的下标可更改的，那样和默认地用数组下标方式就是一样的。