首页天道酬勤谈谈你对diff算法的理解,文本比较算法

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

张世龙 05-12 13:09 15次浏览

实际DOM与虚拟DOM的区别虚拟DOM是目前两个主要框架vue和react所使用的技术,到底有两个主要框架所喜爱的优缺点呢?

在理解虚拟DOM之前,先了解一下什么是DOM吧

文档对象模型(DOM )是用于渲染和处理任何HTML或XML文档的API。 DOM是加载到浏览器中的文档模型,以节点树的形式表示文档。 每个节点表示文档的组成部分,如:页元素、字符串和注释。

上面的说明来源于mdn,看起来很贵很难理解吗? 嗯,是官方文档吧。 总之很难理解吗? 我个人理解,DOM是js对象,用于处理页面上的元素。

DOM用于处理页面上的元素,而虚拟DOM当然也用于处理页面上的元素。 字面理解后,如下所示

虽然是假DOM,但它也是可以代替DOM树使用的常见js对象,因此还包括实际DOM的特性,如标记名称、标记上的属性、事件侦听和子元素

既然DOM对象已经存在,为什么大家都要用虚拟DOM代替DOM呢? 那有什么优点?

可以减少不必要的DOM操作。 尝试添加1000个节点时,实际的DOM会一个个增加。 但是,虚拟DOM可以将多次操作合并为一次操作,从而减少DOM操作的频率。 如果1000个节点中只有100个是新添加的,则虚拟DOM也只能操作新添加的100个。 这是通过虚拟DOM的diff算法实现的。跨平台渲染具有跨平台性,因为虚拟DOM实际上仍然是JS对象,不仅可以代替DOM,还可以通过applet、IOs APP和虚拟DOM与实际DOM的速度相比,没有什么比直接操作DOM更快,但DOM的操作速度更快,但浏览器渲染非常耗时。 这是因为需要将操作要素一个个钉钉,浏览器也渲染页面。 但是,由于虚拟DOM通过减少操作频率来减少浏览器的渲染时间,所以在这种情况下,虚拟DOM的速度实际上比实际的DOM高

所以可以得出一个结论

操作数非常多时可以选择DOM操作,数一般时可以选择虚拟DOM

上面讨论了虚拟DOM的优点,虚拟DOM有缺点吗?

当然有。 虚拟DOM需要其他创建函数,如react的创建函数和vue的h函数。 vue用vue-loader解决此问题,react用babel解决此问题,同时也依赖于第三方打包工具。

//React的虚拟DOMcreateelement(div,) class name : (red,onClick: ) )={}、(createeelement (span )、() span ) ' spanName2' )//Vue的虚拟DOMh(div )、{ class:'red )、on: ) click: )={}、}、h ) span ),

这是晚上找的图像,相反,也可以随便看。 分配算法是通过比较新的虚拟DOM和旧的虚拟DOM以找出差异来渲染页面。

diff按层次比较新旧虚拟DOM,找出节点(组件或标签)的差异并将其替换。

虚拟diff的错误在同一水平上比较时存在错误

13表示三个兄弟li节点,如果删除2,3将是新的2。 UE通过增加:key解决了这个问题,react也有这个问题。 详细说明请参阅以下博客

文章: https://www.zhi Hu.com/question/61064119/answer/76607894

js创建虚拟dom,condom是什么 vue什么是虚拟dom,vue和react的优缺点