京东一面因为不知道虚拟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