虚拟 DOM 的优缺点?
什么是虚拟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 的优缺点?的更多相关文章
- 虚拟DOM
传统的 DOM 操作是直接在 DOM 上操作,当需要修改一系列元素中的值时,就会直接对 DOM 进行操作.如果需要操作的DOM元素过多,则成本太高,而采用 Virtual DOM 则会对需要修改的 D ...
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM
- React虚拟DOM浅析
在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...
- React的虚拟DOM
ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...
- react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...
- 【虚拟DOM】√
深度剖析:如何实现一个 Virtual DOM 算法 为什么虚拟DOM更优胜一筹 新建树,渲染树,新建新树,对比树(算法),最少dom操作的渲染树
- React生命周期和虚拟DOM
一.虚拟DOM 1.React并不直接操作DOM,React中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器 2.React实 ...
- [深入react] 4.牛逼闪闪的虚拟DOM
React.createElement嵌套后的结果就是虚拟dom,虚拟dom听着很高端,其实就是一个json,类似: { type:'div', props:{ className:"box ...
- React虚拟DOM具体实现——利用节点json描述还原dom结构
前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...
- 实现一个简单的虚拟DOM
现在的流行框架,无论React还是Vue,都采用虚拟DOM. 好处就是,当我们数据变化时,无需像Backbone那样整体重新渲染,而是局部刷新变化部分,如下组件模版: <ul class=&qu ...
随机推荐
- ansible(14)--ansible的get_url模块
1. get_url模块 功能:通过互联网下载软件至被控端本地: 主要参数如下: 参数 说明 url 资源文件在互联网上的具体url地址 dest 文件下载位置的绝对路径 mode 文件下载位置的绝对 ...
- cesium教程6-用entity绘制点线面label和billboard广告牌
注意:billboard显示的图片是立体的,会跟随角度而变化的. pinBuilder.fromText()用于创建自定义地图图钉 完整示例代码: <!DOCTYPE html> < ...
- cesium基础知识汇总PPT版
以上教程来自火星科技,原视频教程地址如下: https://ke.qq.com/course/468292/3985600802137412#term_id=100560563
- PageOffice 6 版本最简单的打开保存文件
在OA办公.文档流转等各个Web系统中,实现最简单的打开编辑保存文件功能,调用PageOffice只需要几行代码就可以完成. 后端代码 在后端编写代码调用webOpen方法打开文件之前给SaveFil ...
- DashVector x 通义千问大模型:打造基于专属知识的问答服务
本教程演示如何使用向量检索服务(DashVector),结合LLM大模型等能力,来打造基于垂直领域专属知识等问答服务.其中LLM大模型能力,以及文本向量生成等能力,这里基于灵积模型服务上的通义千问 A ...
- 让智慧物联赋能高效生产, AIRIOT助力数字化油田转型升级
近年来,中国石油行业为了推进工业化和信息化深度融合,充分结合勘探开发.生产科研和经营管理的实际需求,积极通过信息化建设促进油田业务转型升级.在勘探开发与管理的领域中,油气生产物联网系统是一个极其重 ...
- Rainbond 携手 TOPIAM 打造企业级云原生身份管控新体验
TOPIAM 企业数字身份管控平台, 是一个开源的IDaas/IAM平台.用于管理账号.权限.身份认证.应用访问,帮助整合部署在本地或云端的内部办公系统.业务系统及三方 SaaS 系统的所有身份,实现 ...
- php基本语法与安装
// 什么是PHP // PHP 是 后端语言的一种 // 主要作用就是实现数据交互 // ...
- INFINI Labs 产品更新 | Agent 全新重构,优化指标采集,支持集中配置管理,支持动态下发等功能
INFINI Labs 产品又更新啦~ 本次更新主要有 Agent.Console.Loadgen 等产品,其中 Agent 进行全新重构升级,新版限制了 CPU 资源消耗,优化了内存,相比旧版内存使 ...
- sse 与 编译器自动优化
direct x 形式的矩阵和向量计算代码在编译的时候是自动汇编为 sse汇编的 何时使用手写sse 指令呢,当你的应用程序需要写一些物理运算时候 可以使用自己编写的sse计算函数来为 3维运算加速 ...