真实DOM和虚拟DOM的区别
虚拟DOM是当下两个主流框架vue和react使用到的技术,它到底有什么优缺点可以让两大主流框架所青睐呢?
在了解虚拟DOM之前,我们先了解什么是DOM
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 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,也可以变成小程序,IOS应用,安卓应用。
虚拟DOM和真实DOM的速度对比,没有什么会比直接操作DOM速度更快的,但是DOM操作速度快,但是浏览器渲染却十分耗时,因为它是一个板凳一个钉子的去进行操作元素,浏览器也需要一个板凳一个钉子的去渲染页面,而虚拟DOM通过减少操作频率从而减少浏览器的渲染时间,所以在这种情况下,虚拟DOM的速度其实是高于真实DOM的,但是操作数量十分庞大时,虚拟DOM的速度也会没有真实DOM快。
所以我们可以得到一个结论
当操作数量十分庞大时,可以选择DOM操作,数量一般时,则可以选择虚拟DOM文章来源:https://www.toymoban.com/news/detail-475288.html
上面说了那么所虚拟DOM的优点,那么,虚拟DOM有缺点吗?
当然是有的,虚拟DOM需要额外的创建函数,如react中的createElement和vue中的h函数,vue通过vue-loader,react通过babel来解决这个问题,解决了这个问题的同时也造成了对第三方打包工具的依赖性。文章来源地址https://www.toymoban.com/news/detail-475288.html
到了这里,关于什么是虚拟DOM的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!