为什么虚拟 dom 会提高性能?

最新推荐文章于 2021-07-13 10:54:34 发布
最新推荐文章于 2021-07-13 10:54:34 发布
阅读量436 收藏
点赞数 2
分类专栏： 面试 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44417271/article/details/115372818
版权

为什么虚拟 dom 会提高性能?

虚拟DOM的本质就是就是一个js对象 虚拟DOM就是把真实DOM转换成一个js对象 然后交由一些技术来处理这个js对象以达到高效率处理dom操作
diff就是用来区分虚拟DOM和真实DOM区别的一个算法
什么是调和？

将Virtual(虚拟)DOM树转换成actual(真实)DOM树的最少操作的过程称为调和 。

diff算法是调和的具体实现。
·港岛妹妹
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
说说真实dom和虚拟dom有什么区别，虚拟dom的优势是什么？
Sink
12-08 2000
虚拟dom
详解Vue中的虚拟DOM
dichu2296的博客
06-26 1124
摘要： 什么是虚拟DOM? 作者：浪里行舟 Fundebug经授权转载，版权归原作者所有。 前言 Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了内存消耗。那么，什么是Virtual DOM？为什么需要Virtual DOM？它是通过什么方式去提升页面渲染效率的呢？这是本文所要探讨的问题。 模板转换成视图的过程 在正式介...
虚拟dom为什么提升性能
q314235965的专栏
06-06 406
真实dom节点比较臃肿。对它的访问和修改都像要访问和修改一个大型object一样。object存储在堆。占用空间越大访问性能越低。 dom和js不是一个模块。跨模块访问性能低。 不高级的dom操作会引起频繁的回流。回流可能牵连甚广。性能低。 虚拟dom并不是摒弃真实dom操作（曾经有只使用canvas的思想完全不用dom）。而是尽量减少操作。在没有虚拟dom思想之前。也会有很多规范来进行优化减少dom操作。比如统一处理一次回流、比如fragment。后来就有类似vue react框架用虚拟dom的思想来减.
虚拟DOM为何出现以及性能问题
Meskjei的博客
07-24 2612
传统的前端编程方式是命令式编程，即直接操纵DOM，告诉浏览器该怎么干。这样的问题就是，大量的代码被用于操作DOM元素，且代码可读性差，可维护性低。 而React、Vue这些数据驱动的前端框架的出现，将命令式编程变为了函数式编程，从而大幅提升代码的可读性、可维护性。 这些框架纵然摒弃了直接操作DOM，我们只要关心数据的变动，DOM的操作由框架完成。但是这样做带来了一些性能问题。 在最原始的情况下，框...
为什么虚拟dom会提高性能
LuckXinXin的博客
08-27 744
虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能 具体实现步骤如下 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新 ...
Vue.js 2.0窥探之Virtual DOM到底是什么？
12-02
最后，对于某些特定场景，如频繁或大规模的DOM变化，虚拟DOM的计算开销可能会比直接操作DOM更高。 然而，虚拟DOM带来的优势不容忽视。它可以批量处理变更，降低了DOM操作的频率，提高了性能。此外，虚拟DOM使得实现...
vue 源码解析之虚拟Dom-render
10-16
Vue.js 是一个流行的前端JavaScript框架，它的核心特性之一就是使用虚拟DOM来提高性能和效率。虚拟DOM是Vue在内存中构建的一种数据结构，它模拟了真实的DOM树，允许Vue在更新UI时进行高效的比较和更新操作。 在Vue...
26-虚拟DOM：虚拟DOM和实际的DOM有何不同？_For_vip_user_0011
08-04
"虚拟DOM技术解析" 虚拟DOM是一种高效的前端技术，...最后，我们可以看到，虚拟DOM 技术可以解决许多性能问题，提高渲染效率。同时，虚拟DOM 也可以帮助我们更好地理解前端框架的工作机制，提高我们对前端技术的掌握。
虚拟DOM的实现
05-20
虚拟DOM（Virtual DOM）是现代前端开发中的一个重要概念，它是一种优化Web应用性能的技术，尤其在React、Vue等JavaScript库和框架中广泛应用。虚拟DOM的主要目的是通过减少对真实DOM的操作来提升性能，因为DOM操作是...
vue蓄力3：虚拟dom为什么能提高性能
sanlyshi's front-end road
08-30 548
虚拟DOM其实就是一个JavaScript对象。通过这个JavaScript对象来描述真实DOM，真实DOM的操作，一般都会对某块元素的整体重新渲染，采用虚拟DOM的话，当数据变化的时候，只需要局部刷新变化的位置就好了 ...
直接操作DOM一定比虚拟DOM操作耗时，diff算法，key值，虚拟 DOM的定义
感恩、奋进、自信
03-13 2992
直接操作DOM一定比虚拟DOM操作耗时吗？ 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗？ 1）虚拟DOM的本质就是一个JS对象，虚拟DOM减少了真实DOM的操作，当修改数据的时候，就是修改虚拟DOM产生全新的虚拟DOM， 新旧虚拟DOM使用diff算法，得到patch(也就是需要修改的部分)，然后将这个patch打到浏览器的DOM上 （减少重绘和回流，从而达到性能优化的目的...
浅谈VUE虚拟dom
MrLiber的博客
01-11 4591
Dom操作是比较浪费时间和性能的，当数据量很大时，更新DOM是非常耗费性能的操作，当我们使用Javascript来修改我们的页面，浏览器已经做了一些工作，以找到DOM节点进行更改，例如： document.getElementById('myId').appendChild(myNewNode); 在现代的应用中，会有成千上万数量个DOM节点。所以在数据更新的时候产生的计算非常昂贵。 琐碎
深度剖析：如何实现一个 Virtual DOM 算法
weixin_34279184的博客
11-22 155
作者：戴嘉华 转载请注明出处并保留原文链接（ https://github.com/livoras/blog/issues/13 ）和作者信息。 目录： 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一：用JS对象模拟DOM树 4.2 步骤二：比较两棵虚拟DOM树的差异 4.3 步...
虚拟dom及其优劣
Charlene_lx的博客
04-29 6078
什么是虚拟dom 用js模拟一颗dom树,放在浏览器内存中.当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中,反应到实际的dom树,减少了dom操作. 虚拟DOM将DOM树转换成一个JS对象树,diff算法逐层比较,删除,添加操作,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for引入key值进行区分. 优点: -虚拟DOM...
为什么需要虚拟DOM，它有什么好处？
weixin_45744454的博客
07-13 3043
为什么需要虚拟DOM，它有什么好处？ web界面由DOM树来构建，当其中一部分发生变化时，其实就是对应某个节点发生了变化。 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。若一次操作DOM中有十次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这十次更新的diff内容保存到本地一个js中，最终将这个js对象一次性attach 到DOM树上，在进行后续操作。避免大量无谓的计算量。所以，用js对象模拟DOM节点的好处是，页面的更新可以先全部反应在js对象（虚拟DOM）上，操作内存中的js对象的速度显然
浅谈React的最大亮点——虚拟DOM
热门推荐
筱葭的博客
05-04 1万+
React非常快速是因为它从不直接操作DOM。 虚拟DOM是在DOM的基础上建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。 1、传统App与React App的对比： 传统App React App 2、虚拟DOM的原理： React会在内存中维护一个虚拟DOM树，对这个树进行读或写，实际上是
虚拟DOM同样也是操作DOM，为啥说它快？
weixin_34290000的博客
04-12 593
为什么80%的码农都做不了架构师？>>> ...
React-为什么要使用虚拟DOM
柒青衿的博客
07-01 6150
什么是虚拟DOM（Virtual DOM）首先，解释下虚拟DOM。虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应。虚拟DOM的工作原理是：数据 -> 全新的虚拟DOM -> 与上一个状态的虚拟DOM进行diff算法比较，得到一个Patch -> 把这个Patch打到浏览器的DOM上。所以虚拟DOM叫的挺高端，其实就有点类似DocumentFragment，把多次DOM操作做
什么是虚拟Dom？而且为什么更快？
qq_26889291的博客
04-15 769
根据React docs，虚拟DOM是 虚拟DOM（VDOM）是一种编程概念，其中UI的理想或“虚拟”表示形式保存在内存中，并通过诸如ReactDOM之类的库与“真实” DOM同步 在深入研究虚拟DOM之前，先快速介绍一下DOM 文档对象模型（DOM）是对象的数据表示，包括Web上文档的结构和内容 因此，基本上DOM是XML和HTML之类的文档的树状结构表示。我们可以使用DOM添加，删除或更新那些文档中的元素。 什么是虚拟DOM？ 虚拟DOM是DOM的表示。实际dom的创建将由浏览器处理。诸如react
为什么虚拟DOM树可以提高网页性能
最新发布
07-14
虚拟DOM（Virtual DOM）是一种在内存中用 JavaScript 对象表示网页的 DOM 结构的技术。通过使用虚拟DOM，可以在保持页面功能不变的同时，提高网页性能的主要原因如下： 1. 批量更新：虚拟DOM能够将多个DOM操作批量处理，减少了直接操作实际DOM的次数。通过比较虚拟DOM树和实际DOM树的差异，只对需要更新的部分进行实际DOM操作，从而减少了浏览器的重绘和回流次数。 2. 减少重绘和回流：虚拟DOM可以通过比较更新前后的虚拟DOM树差异，只更新需要变化的部分。这种优化方式可以减少浏览器对页面进行重绘和回流的次数，从而提高网页性能。 3. 提高渲染效率：虚拟DOM可以在内存中进行操作，而不是直接操作实际DOM。在虚拟DOM中进行各种计算和操作要比直接在实际DOM中进行快得多。这样可以提高页面的渲染效率，减少用户在页面上的等待时间。 4. 跨平台支持：虚拟DOM是对实际DOM的抽象表示，在不同平台上运行的应用程序可以共享相同的虚拟DOM操作逻辑。这种跨平台支持使得开发者能够更轻松地开发和维护多平台的应用程序。 需要注意的是，虚拟DOM并不一定总是能够提高网页性能。在某些情况下，虚拟DOM的额外计算和比较操作可能会带来一定的性能开销。因此，在实际应用中，仍然需要根据具体情况综合考虑使用虚拟DOM的优缺点，并进行性能测试和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值