什么是虚拟dom
用js模拟一颗dom树,放在浏览器内存中.当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中,

反应到实际的dom树,减少了dom操作.

虚拟DOM将DOM树转换成一个JS对象树,diff算法逐层比较,删除,添加操作,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for引入key值进行区分.

优点:

  • 保证性能下限: 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作,它的一些 DOM 操作的实现必须是普适的,所以它的性能并不是最优的;但是比起粗暴的 DOM 操作性能要好很多,因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下,依然可以提供还不错的性能,即保证性能的下限;
  • 无需手动操作 DOM: 我们不再需要手动去操作 DOM,只需要写好 View-Model 的代码逻辑,框架会根据虚拟 DOM 和 数据双向绑定,帮我们以可预期的方式更新视图,极大提高我们的开发效率;
  • 跨平台: 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关,相比之下虚拟 DOM 可以进行更方便地跨平台操作,例如服务器渲染、weex 开发等等。

缺点:

  • 无法进行极致优化: 虽然虚拟 DOM + 合理的优化,足以应对绝大部分应用的性能需求,但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。
    首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。

虚拟 DOM 的优缺点?的更多相关文章

  1. 虚拟DOM

    传统的 DOM 操作是直接在 DOM 上操作,当需要修改一系列元素中的值时,就会直接对 DOM 进行操作.如果需要操作的DOM元素过多,则成本太高,而采用 Virtual DOM 则会对需要修改的 D ...

  2. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  3. React虚拟DOM浅析

    在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...

  4. React的虚拟DOM

    ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...

  5. react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  6. 【虚拟DOM】√

    深度剖析:如何实现一个 Virtual DOM 算法 为什么虚拟DOM更优胜一筹 新建树,渲染树,新建新树,对比树(算法),最少dom操作的渲染树

  7. React生命周期和虚拟DOM

    一.虚拟DOM 1.React并不直接操作DOM,React中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器 2.React实 ...

  8. [深入react] 4.牛逼闪闪的虚拟DOM

    React.createElement嵌套后的结果就是虚拟dom,虚拟dom听着很高端,其实就是一个json,类似: { type:'div', props:{ className:"box ...

  9. React虚拟DOM具体实现——利用节点json描述还原dom结构

    前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...

  10. 实现一个简单的虚拟DOM

    现在的流行框架,无论React还是Vue,都采用虚拟DOM. 好处就是,当我们数据变化时,无需像Backbone那样整体重新渲染,而是局部刷新变化部分,如下组件模版: <ul class=&qu ...

随机推荐

  1. springboot项目启动会报4个加载不到的debug提示,可改可不改

    1. 因为启动的时候会报提示: Unable to locate LocaleResolver with name 'localeResolver': using default [org.sprin ...

  2. 【WPF】自定义数据集合绑定到UI界面

    需要展示列表项,从https://github.com/jdscodelab/File-Manager-UI-Wpf这个项目,只有前端UI. 复用了其文件内容列表   主要源码: <StackP ...

  3. Java21 GA新特性-虚拟线程详解

    本文转载至:虚拟线程 - VirtualThread源码透视 - throwable - 博客园 (cnblogs.com) 一. 前提 JDK19于2022-09-20发布GA版本,该版本提供了虚拟 ...

  4. django验证码插件 --- django-simple-captcha

    使用django-simple-captcha实现登录验证码: 第一步:安装pillow依赖 pip install pillow  -i https://pypi.tuna.tsinghua.edu ...

  5. itest work 开源接口测试&敏捷测试管理平台 9.5.0 GA_u1,优化及修复关键 BUG

    (一)itest work 简介 itest work (爱测试)  一站式工作站让测试变得简单.敏捷,"好用.好看,好敏捷" ,是itest wrok 追求的目标.itest w ...

  6. kettle从入门到精通 第十六课 kettle 映射 (子转换)02

    1.上节讲的子映射里面只有一个转换(类似一个java类里面只有一个公共方法),本次讲解的有两个,实际上可以有任意多个(一个java类里面有多个公共方法).两个转换分别计算x+y和x*y. 2.命名参数 ...

  7. 算法金 | AI 基石,无处不在的朴素贝叶斯算法

    大侠幸会,在下全网同名「算法金」 0 基础转 AI 上岸,多个算法赛 Top 「日更万日,让更多人享受智能乐趣」 历史上,许多杰出人才在他们有生之年默默无闻, 却在逝世后被人们广泛追忆和崇拜. 18世 ...

  8. C#.NET根据不同业务类别类型写入不同文件中,动态创建log4net实例验证

    C#.NET根据不同业务类别类型写入不同文件中,动态创建log4net实例验证 参考了:https://www.cnblogs.com/-dawn/p/8598566.html GetLog4netI ...

  9. 闪迪SSD PLUS 128G CDM CrystalDiskMark

    闪迪SSD PLUS 128G CDM CrystalDiskMark 4k 读取才11,大号U盘水平. -- 对比三星SATA SSD. ..

  10. 解密Prompt系列31. LLM Agent之从经验中不断学习的智能体

    Agent智能体的工作流可以简单分成两种:一种是固定的静态工作流,一种是智能体自主决策的动态工作流. 静态流程的Agent举几个例子,例如新闻热点追踪推送Agent,每日新论文摘要总结Agent,它们 ...