前端高频面试题---什么是虚拟DOM?

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

前言

一、学到什么时候会遇见虚拟DOM？

1.1.什么是虚拟DOM？

二、在虚拟DOM出现之前我们是怎么操作DOM的？

2.1.使用原生JS/jQuery

2.2.在vue2.0推出后我们是怎么操作DOM的？

三、虚拟DOM的使用

3.1虚拟DOM的使用位置

3.2虚拟DOM的工作流程

3.3虚拟DOM核心diff算法

总结

---

前言

本人大四即将毕业，近半年来一直在学习web相关知识，即将投递简历进行面试，从网上和自己的理解总结了一些面试题，想与大家分享一下，也充当自己的收藏夹。

---

提示：以下是本篇文章正文内容，下面案例可供参考，如有错误请指正!!!

一、学到什么时候会遇见虚拟DOM？

在学到框架时，会接触到虚拟DOM，虚拟DOM首次产生是React框架最先题出和使用的，其卓越的性能很快得到了广大开发者的认可，继React之后vue2.0也在其核心引入了虚拟DOM的概念。

1.1.什么是虚拟DOM？

简单的说：虚拟DOM就是用来模拟DOM结构的一个js对象。

二、在虚拟DOM出现之前我们是怎么操作DOM的？

2.1.使用原生JS/jQuery

        这时通过直接操作DOM元素来达到视图更新的效果

        流程：直接操作DOM元素 -> 视图更新。

2.2.在vue2.0推出后我们是怎么操作DOM的？

        更新视图的核心是：改变数据 -> 操作DOM -> 视图更新

在vue中：改变数据 -> 操作DOM 这个过程是在vue中进行的

改变一次数据就要操作一次DOM，那么当许多数据同时改变，就要多次作DOM，这样的方式是不行的，最直接的缺点就是浪费时间。所以，虚拟DOM派上了用场!!!

三、虚拟DOM的使用

3.1虚拟DOM的使用位置

数据改变 -> 虚拟DOM(计算变更) -> 操作DOM -> 视图更新

3.2虚拟DOM的工作流程

首先：用JS以对象的形式模拟DOM结构，表示页面上的某个节点

其次：通过patch函数，将虚拟DOM节点塞入到空的容器中

最后：通过核心计算渲染时指挥修改改变过的节点，没有变化的节点不需要再次渲染

使用虚拟DOM的好处在于，新虚拟DOM和旧虚拟DOM的比较，计算出来需要更新的视图，再操作DOM，也就是使用虚拟DOM来表示真实的DOM，目的计算出最小的变化，根据最小变化来更新真实的DOM结构

3.3虚拟DOM核心diff算法

上面提到了，当新虚拟DOM、旧虚拟DOM进行对比时，需要使用diff算法来计算，那么什么是diff算法呢？它的工作原理又是什么？使用它有什么优势？

diff算法的概念：diff 算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历

流程：

        1-先遍历一次老的虚拟DOM

        2-再遍历一次新的虚拟DOM

        3-根据改变/新增，对真实DOM重新进行排序

 弊端：如果有100个DOM节点的话就要计算100^3次，如果节点更多的话会造成大量的计算，这样的方式是不可取的

所以，vue中对diff算法进行了优化

        1-只会比较同一层级，不会跨级比较

        2-比较标签名：标签名不同时，直接删除，不继续深入比较

        3-标签名相同时：判断key是否相同，这就是为什么在vue中v-for循环 一定要绑定key的原因，当key相同时，就会默认是相同节点，不进行深入比较

优点：通过优化后，100个DOM节点只会计算100次，极大的节约了时间。

---

总结

以上就是对虚拟DOM、以及虚拟DOM核心diff算法的简单理解，对于前端初级的同学，在概念的理解上到这里即可了，对DOM更深入的学习还在后面！