首页天道酬勤vue什么是虚拟dom,vue和react的优缺点

vue什么是虚拟dom,vue和react的优缺点

张世龙 05-12 13:10 74次浏览

什么是虚拟DOMDOM树? 为什么本机JS要浪费性能? 什么是虚拟DOM? 为什么虚拟DOM的结构更好? 什么是diff算法?

在这三个框架中,(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算法? 分为三个部分treediffcomponentdiffelementdiff,比较新旧(虚拟) dom树、dom树的组件和组件元素

tree diff

按层次比较新旧两个DOM树的过程是tree diff

按层次比较整个DOM树时,更新的元素component diff

如果执行tree diff,则比较每层组件,如果新旧组件类型相同,则执行元素diff比较;如果不同,则直接删除组件,然后执行新组件element diff

在component diff比较中,如果两个组件类型相同,则会比较内部元素

总结

比较整个DOM树时,将比较页面中DOM树的内容是否有变化,然后比较组件是否匹配、不匹配的替换以及匹配的比较组件是否匹配疲劳元素。 一旦完成更新,所有元素都不会泄露

但是,在循环的情况下,key值的设定有问题会导致diff算法的比较错误。 在下一章详细理解key是有效的。 为什么不能将索引用作密钥?

谈谈你对diff算法的理解,文本比较算法