优点:

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

缺点:

无法进行极致优化: 虽然虚拟 DOM + 合理的优化,足以应对绝大部分应用的性能需求,但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

虚拟 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. 构建api gateway之 如何给openresty打patch

    如何给openresty打patch 由于很多功能实现的限制,我们不得不修改openresty,但我们又不一定能持续维护一个 openresty 分支,所有有了patch 这一操作. patch是怎么 ...

  2. ASP.NET Core - IStartupFilter 与 IHostingStartup

    1. IStartupFilter   上面讲到的方式虽然能够根据不同环境将Startup中的启动逻辑进行分离,但是有些时候我们还会可以根据应用中的功能点将将一系列相关中间件的注册封装到一起,从 St ...

  3. H5商城项目源码 (可预览 测试有效)

    商城简介 这个商城项目由首页模块,发现模块,购物车模块以及我的等四大模块组成了33个相关内容界面 预览下载直通车 预览地址 首页模块 首页拥有搜索模块.分类模块.内容模块组成 发现模块 发现模块主要是 ...

  4. Consul调用no instances或Consul页面All service checks failing

    1.问题体现 Consul中Consumer调用Provider会出现No instances available for XXX 这时打开Consul控制台页面: 可以看到这里出现All servi ...

  5. vim之YouCompleteMe插件问题:The ycmd server SHUT DOWN (restart with ...low the instructions in the documen

    cd ~/.vim/plugged/YouCompleteMe 然后运行./install.py 1.因为我是单独下载的Youcompleteme,所以要将整个文件夹拷贝到上述目录下,再运行

  6. 微信小程序wx.navigateTo跳转参数大小超出限制问题

    微信小程序的跳转方式 wx.navigateTo(Object):保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页(新页面入栈) wx.redirectTo( ...

  7. setInterval()的使用

    setInterval() 作用  这个函数可以将一个函数每隔一段时间执行一次 参数  1.回调函数,该函数会每隔一段时间被调用一次  2.每次调用间隔的时间,单位是毫秒 返回值  返回一个Numbe ...

  8. JZOJ 1090. 【SDOI2009】晨跑

    题目 略,luogu上有 解析 一眼费用流 然而怎么建图? 首先我们要挖掘题中的限制条件和性质 一个点只能经过一次 能走的天数最长 满足第二条的条件下走过的路程最短 那么显然是最小费用最大流了 对于后 ...

  9. Spring Boot学习笔记(一)----概要与入门

    本文来自博客园,作者:{张果},转载请注明原文链接:{SpringBoot学习笔记(一)--SpringBoot概要与快速入门} 一.Spring Boot概要 没有Spring Boot开发项目时各 ...

  10. 梅毒感染者能否应用TNF抑制剂

    对于伴发的未经控制的任何严重感染,都不适合使用TNF抑制剂.在1998年国际上首个TNF抑制剂获批治疗类风湿关节炎(RA)以来,这就是广大临床医生和风湿性疾病患者的共识.在临床实践中,需要权衡药物的利 ...