虚拟DOM

京东一面因为不知道虚拟DOM所以挂了。。

所以什么是虚拟DOM？

什么是DOM?

有了DOM为什么还要有虚拟DOM?

1、什么是DOM？

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

 2、为什么要虚拟DOM?

先介绍浏览器加载一个HTML文件需要做哪些事，帮助我们理解为什么我们需要虚拟DOM。webkit引擎的处理流程如下：

第一步，解析html以构建DOM树。

第二步：用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

第三步：将上面的DOM树和样式表，关联起来，构建Render树（渲染树）。这一过程又称为Attachment。每个DOM节点都有attach方法，接受样式信息，返回一个render对象（又名renderer）。这些render对象最终会被构建成一颗Render树。

注：渲染树与Dom树不同的地方在于，Dom树会把所有的Dom节点都展示出来，渲染树只会展示display非none的元素

第四步：将渲染树上的节点，根据它的高度，宽度，位置，为节点生成盒子（layout）。

第五步：确定渲染树上的节点的大小和位置后，便可以对节点进行涂鸦（paint）。

因此，当你用传统的源生api或jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的，常常会出现页面卡死的情况；所以尽量减少对DOM的操作成为了优化前端性能的必要手段，vdom就是将DOM的对比放在了js层，通过对比不同之处来选择新渲染DOM节点，从而提高渲染效率。

其次，使用原生js或者jquery写页面的时候会发现操作DOM是一件非常麻烦的一件事情，往往是DOM标签和js逻辑同时写在js文件里，数据交互时不时还要写很多的input隐藏域，如果没有好的代码规范的话会显得代码非常冗余混乱，耦合性高并且难以维护。

3、什么是虚拟DOM？

可以理解为：用 JavaScript 将DOM节点虚拟化表示，用数据对象来呈现DOM树，虚拟DOM它可以使我们操作这块的数据对象

如果我们使用虚拟DOM，而不是直接在代码中调用类似 .getElementById 的 DOM API 方法，操作就会像改变 JS 对象一样非常的简单省时。

虚拟DOM的目的是将所有操作累加起来，统计计算出所有的变化后，统一更新一次DOM。

举例：

（1）查询一个text标签的值，可以直接从虚拟dom中查找得到，根本不需要查询实体DOM。

（2） 在一次操作中，要修改列表中的两条记录，要修改的元素会先把变更同步到虚拟DOM上，然后根据最新的虚拟DOM，一次性渲染出最终的实体DOM，如果没有虚拟DOM，两条记录的修改至少要对应两次对实体DOM的操作，显然操作实体DOM越频繁，网页速度越慢

4、DOM的缺点？

• 大小 - 其中之一就是更多的功能意味着代码包中更多行的代码。幸运的是，Vue.js 2.0 依旧比较小（当前版本 21.4kb），并且也正在删除很多东西。

• 内存 -同样，虚拟DOM需要将现有的DOM拷贝后保存在内存中，这是一个在DOM更新速度和内存使用中的权衡。

• 并不适用所有情况 -如果虚拟DOM可以一次性进行批量的修改是非常好的。但是如果是单独的、稀少的更新呢？这样的任何DOM更新都将会使虚拟DOM带来无意义的预计算。

因此，如果某个项目只有较少数量的节点，那么使用虚拟DOM会带来速度上质的变化么？实际上更可能的是使其更慢了！

但是对于多数的单页面应用来说，它还是会带来提升的。

 

参考：https://blog.csdn.net/qq_23980427/article/details/54580623

https://www.jianshu.com/p/616999666920

https://segmentfault.com/q/1010000010303981