什么是虚拟DOM?(vue,react)什么是diff算法?
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了什么是虚拟DOM?(vue,react)什么是diff算法?，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2089字，纯文字阅读大概需要3分钟。
内容图文
虚拟DOM
????在这三个框架中(vue,react),都是使用虚拟DOM来提高效率的,那么来说说什么是虚拟DOM?为什么要用?还有它是怎么工作的?
什么是DOM
浏览器中的一个概念,用JS对象来表示页面上的元素,并提供用于操作DOM对象的API
DOM树
一个网页呈现的概念
网页呈现的过程:
- 浏览器请求服务器获取页面HTML代码
- 浏览器要先在内存中解析DOM结构,并在浏览器内存中渲染出一个DOM树
- 浏览器把DOM树呈现在页面上
为什么原生JS会浪费性能?
举个例子:
我要更新10个DOM节点,浏览器会一个一个的进行更新,但它更新第一个的时候并不知道后面还有9个,所以会一个一个执行,共执行10次。每一次的更新都要去计算，但更新后DOM树变化了，更新第二个的时候，前一次计算的就没法再利用了，还需要再计算。白白浪费性能。
什么是虚拟DOM？
框架中的概念，用JS对象来模拟页面上DOM和DOM之间的嵌套，本质是一个对象，而且把原生对象中的属性根据需要添加，不是全部存在，更‘轻’。
工作原理
获取内存中的(虚拟)dom树和新生成的(虚拟)dom树,通过diff算法进行对比,得到需要更新的DOM元素
这两颗(虚拟)DOM树都是框架模拟出来的,就是个对象,旧的会被保存在内存中
为什么虚拟DOM性能更优秀？
还是要更新10个DOM节点，虚拟DOM不会一次一次的去通知浏览器，而是通过diff算法去操作框架造出来的虚拟DOM树(也就是个对象)，更新对象速度会很快，然后将修改后的虚拟DOM树一次性的让浏览器进行挂载更新，减少计算的浪费。
这么一比较，浏览器只是运作了一次，达到高效的更新渲染
什么是diff算法？
分成三部分tree diff component diff element diff,分别去对比新旧(虚拟)dom树,DOM树中的组件,组件中的元素
tree diff
新旧两个DOM树，逐层对比的过程，就是tree diff
当整个DOM树逐层对比完毕，则能找到要被更新的元素
component diff
在进行tree diff的时候,会对每一层的组件进行对比,如果新旧组件的类型相同,会进行element diff对比,如果不同,直接移除组件更新新组件
element diff
在进行component diff对比时如果两个组件的类型相同,会对其内部的元素进行对比
总结
在对比整个DOM树时,先对比页面中的DOM树内容是否有变化,然后对比组件是否一致,不一致的替换,一致的对比组件累的元素是否一致。有次，可以不漏下每一个元素，完成更新
但是，当循环的时候，设置key值有问题会导致diff算法对比失误，下章详解key值得作用，为什么不能使用index当key？
内容总结
以上是互联网集市为您收集整理的什么是虚拟DOM?(vue,react)什么是diff算法?全部内容，希望文章能够帮你解决什么是虚拟DOM?(vue,react)什么是diff算法?所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。