什么是虚拟DOM

这篇具有很好参考价值的文章主要介绍了什么是虚拟DOM。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

真实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

上面说了那么所虚拟DOM的优点,那么,虚拟DOM有缺点吗?
当然是有的,虚拟DOM需要额外的创建函数,如react中的createElement和vue中的h函数,vue通过vue-loader,react通过babel来解决这个问题,解决了这个问题的同时也造成了对第三方打包工具的依赖性。文章来源地址https://www.toymoban.com/news/detail-475288.html

到了这里,关于什么是虚拟DOM的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 什么是 游戏引擎 ?各个主流引擎的区别

    在之前的元宇宙中有提及到游戏主播这个行业,那对应的就会有游戏开发者,对于开发最快捷的方式当然是使用游戏引擎进行开发了呀,那接下来我们就来说说这方面的内容吧 ! 本篇文章主要讲解,游戏开发中常用的5个游戏引擎及其idea特性的介绍和对比 游戏引擎是指一些

    2023年04月09日
    浏览(42)
  • MCU+DSP,当下主流的架构设计,来到21569这里,应该如何去实现?

    作者的话 当下的音频DSP设计中,我们习惯于MCU+DSP的架构。DSP做音效,MCU做上位机,做控制,这种搭配的组合是非常成熟的,那么他的底层逻辑是什么?怎么才能实现? 实现逻辑 我们以ADI的SHARC系列DSP来讲的话,21569在之前的调音台、车载DSP的应用中,已经展现的淋漓尽致。

    2024年01月19日
    浏览(35)
  • 为什么要用虚拟 DOM?

    虚拟DOM(Virtual DOM)是一种将应用程序的状态(state)与DOM分离的技术。它是一个JavaScript对象,它的结构类似于实际DOM元素的结构。使用虚拟DOM的目的是在减少DOM操作的数量的同时,提高应用程序的性能和响应速度。 当应用程序的状态发生变化时,使用虚拟DOM可以计算出需要

    2024年02月01日
    浏览(44)
  • vue源码阅读之什么是虚拟dom

    前面简单说过数据响应式原理,大体是个怎么流程,数据发生变化,我们界面如何更新。 依赖收集收集的是watcher,然后当数据发生变化的时候dep通知watcher,然后watcher负责updateComponent。 那么更新组件过程中,有个很重要的概念叫做虚拟dom。 所谓虚拟dom,就是用一个js对象来

    2024年02月13日
    浏览(48)
  • 面试题-React(二):React中的虚拟DOM是什么?

    一、什么是虚拟DOM? 虚拟DOM是React的核心概念之一,它是一个轻量级的JavaScript对象树,用于表示真实DOM的状态。在React中,当数据发生变化时,首先会在虚拟DOM上执行DOM更新,而不是直接操作真实DOM。然后,通过比较前后两个虚拟DOM的差异,最小化真实DOM的操作,从而减少页

    2024年02月12日
    浏览(48)
  • tensorflow-gpu安装100%成功(tensorflow-gpu版和tensorflow-cpu版的区别、为什么要创建虚拟环境、如何同时使用两个gpu库、tensorflow-gpu版安装)

    1.tensorflow-gpu版和tensorflow-cpu版的区别 tensorflow-gpu版需要同时配置安装CUDA、cuDNN,而tensorflow-cpu版不需要配置,直接 pip/conda install tensorflow 即可安装tensorflow-cpu版本 2.为什么要创建虚拟环境 在安装gpu版本的库时通常会创建单独的虚拟环境,例如安装tensorflow-gpu,则需要利用 cond

    2024年02月08日
    浏览(53)
  • 虚拟与真实,交互与交易 | 你为什么喜欢元宇宙游戏?

    虚拟与真实,交互与交易 | 你为什么喜欢元宇宙游戏? 近年来,元宇宙(Metaverse)从科幻想象成为商业概念,在场景社交、产业经济、文化娱乐等方面表现出前所未有的活力。作为真实世界的延伸与拓展,元宇宙借助区块链技术和开放源代码,以去中心化为价值内核的技术构

    2024年01月18日
    浏览(53)
  • 云和虚拟化有什么区别?

    云 和虚拟化概念容易被混淆,特别是因为它们都围绕着用抽象资源创建有用的环境。但是,虚拟化是一项允许您从单个物理硬件系统创建多个模拟环境或专用资源的技术,而云是可在整个网络中抽象,汇总和共享可伸缩资源的IT环境。简而言之,虚拟化是一项技术,而云是一

    2024年01月17日
    浏览(29)
  • 医疗虚拟仿真和虚拟现实有什么区别?哪个更好?

    随着我们在仿真教育中越来越多地使用新技术,区分虚拟模式的类型很重要。虚拟仿真是一个统称,用来概括术语来描述各种基于仿真的体验,从基于屏幕的平台到沉浸式虚拟现实。然而,各虚拟平台在保真度、沉浸感和临场感的水平上有很大差异。医疗教育中存在许多虚拟

    2024年02月11日
    浏览(36)
  • 【Unity知识】Application.streamingAssetsPath 和 Application.persistentDataPath 是什么?这两个路径有何区别?对于我们的意义是什么?

    Application.streamingAssetsPath 和 Application.persistentDataPath 是两个提供文件系统路径的预定义变量。它们在Unity中用于存储和读取游戏数据。 Application.streamingAssetsPath:是一个只读路径,指向游戏包内的“StreamingAssets”文件夹。这个文件夹用于存储那些在游戏打包时需要一起打包的文

    2024年02月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包