菜鸟看前端（虚拟DOM和diff算法）

一. 什么是虚拟DOM

用js来模拟DOM中的节点。一个能代表dom树的对象，通常含有标签名，标签上的属性，事件监听和子元素们，以及其他属性

1. 虚拟DOM

2. vue中创建虚拟DOM

3. vue简化后虚拟DOM

二.为什么使用虚拟DOM

1. 虚拟DOM优点

1.减少dom操作
虚拟dom可以将多次操作和并一次操作。比如你，添加1000个节点，却是一个接一个操作（dom操作1000次一次次添加，虚拟dom只操作一次，将1000个文本直接显示在页面上）
虚拟dom借助Dom diff 可以吧多余的操作省掉，比如添加1000个节点，只有10个是新增的（检测原有的就添加没有的10个）
2.跨平台
虚拟dom不仅可以变成dom ，还可以变成小程序，ios应用，安卓应用，因为虚拟dom本质上只是一个JS对象

2. 虚拟DOM缺点

需要额外的创建函数，如createElement或h，但可以通过JSX来简化成XML写法（严重依赖打包，因为这个语法js不认识的）

3.JS操作真实DOM

用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

4.虚拟DOM

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

三. diff算法

1.什么是diff算法

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁

2.diff算法大概逻辑

tree diff

1. 将新旧两棵树，逐层对比，找出那个节点需要更新
2. 如果是组件就看 component diff
3. 如果是标签就看Element diff

component diff

1. 如果节点是组件，先看组件类型
2. 类型不同直接切换
3. 类型相同只更新属性
4. 深入组件做 tree diff (递归)

Element diff

1. 如果节点是原生标签，则看标签
2. 标签名不同直接替换
3. 相同则直接更新属性
4. 然后进入标签做 tree diff(递归)

3.diff算法步骤

1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中
2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
3. 把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了

4. diff算法优缺点

优点

最终表现在DOM上的修改只是部分的变更，可以保证高效的渲染，提高网页的性能
缺点
首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHtml慢一点