什么是虚拟DOM？

---

什么是虚拟DOM？

虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术，都说他能帮助vue和react提升渲染性能，提升用户体验

大家一定要记住的一点就是，虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。

为什么需要虚拟DOM？

以往，我们改变更新页面，只能通过首先查找dom对象，再进行修改dom的方式来达到目的。 但这种方式相当消耗计算资源， 因为每次查询 dom
，都需要遍历整颗 dom 树。 现在，我们用对象的方式来描述真实的 dom，并且通过对象与真实dom建立了一一对应的关系，那么每次 dom
的更改，我通过找到相应对象，也就找到了相应的dom节点，再对其进行更新。这样的话，就能节省性能，因为js 对象的查询，比对整个dom
树的查询，所消耗的性能要少。

虚拟 DOM 的优缺点？

优点：

1.降低浏览器性能消耗
因为Javascript的运算速度远大于DOM操作的执行速度，因此，运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而提高性能。

在vnode技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的dom，然后修改样式行为或者结构，来达到更新 ui 的目的。这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom树。
在vnode技术出现之后，我们建立一个虚拟 dom 对象来对应真实的 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的 性能开销小。

2.diff算法,减少回流和重绘

通过diff算法，优化遍历，对真实dom进行打补丁式的新增、修改、删除，实现局部更新，减少回流和重绘。

vnode优化性能核心思想，就是每次更新 dom 都尽量避免刷新整个页面，而是有针对性的 去刷新那被更改的一部分 ，来释放掉被无效渲染占用的 gpu，cup性能。同时，也减少了大量的dom操作，减少了浏览器的回流和重绘。

3.跨平台

虚拟 DOM 本质上是 JavaScript 对象，而 DOM 与平台强相关，相比之下虚拟 DOM，可以进行更方便地跨平台操作，例如：服务器渲染、weex 开发等等

缺点：

1.首次显示要慢些

首次渲染大量DOM时，由于多了一层虚拟DOM的计算, 会比innerHTML插入慢

2.无法进行极致优化：

虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中 无法进行针对性的极致优化。

简述虚拟 DOM 实现原理

1.用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树， 插到文档当中；
2.当状态变更的时候，重新构造一棵新的对象树。通过diff 算法，比较新旧虚拟 DOM 树的差异。
3.根据差异，对真正的 DOM 树进行增、删、改。