直接操作真实dom和vue/react操作虚拟dom比较

最新推荐文章于 2022-09-26 14:56:44 发布
最新推荐文章于 2022-09-26 14:56:44 发布
阅读量839 收藏 2
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Vue知识 文章标签： react.js vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43416349/article/details/120580622
本文探讨了操作真实DOM与虚拟DOM的性能差异。结论指出，虽然直接操作真实DOM在某些情况下可能更快，但在实际开发中，如React和Vue等使用虚拟DOM的框架，由于其批处理和差异算法，往往表现更优。这主要是因为开发者在手动操作DOM时可能缺乏高效的代码实现。建议深入理解虚拟DOM的工作原理以提升应用性能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

结论： 1，操作真实dom比虚拟DOM快

            2，平时我们自己写案例会发现，操作真实DOM比较慢，相对react/vue，那是因为，我们代码水平不够。  而vue和react用了虚拟DOM ， 技术基于 batching 和 diff，所以比我们直接操作DOM快。 

详细可以取搜 知乎尤大的 直接操作DOM回答。

从虚拟dom知识无痛深入vue与react的原理
didadidadidadida的博客
03-29 1753
我们都知道像vue、react都有用到虚拟dom,那么虚拟dom到底是什么？框架为什么不直接操作真实dom而要在中间要引入虚拟dom呢？vue和react的虚拟dom又有什么异同呢？我们就从虚拟dom开始讲起，再来逐步引入讲解vue与react的部分原理及其异同，这里会顺便讲解到数据驱动视图及视图驱动数据，顺便明白MVVM、MVC这两种模式，顺便引入相关的八股文知识点，不小心一下子就明白了一大堆知识。
Vue 和 React 中的虚拟 DOM
最新发布
weixin_44100002的博客
02-17 1413
虚拟 DOM是 Vue 和 React 都采用的核心技术，它帮助框架优化 DOM 操作，提升性能。React使用虚拟 DOM 来描述 UI，借助 JSX 和创建虚拟节点，并通过 diff 算法更新真实 DOM。Vue则结合了响应式数据和虚拟 DOM，通过模板编译生成渲染函数，渲染函数返回虚拟节点并通过虚拟 DOM 比较进行最小化更新。尽管实现方式有所不同，二者都借助虚拟 DOM 的优势来优化页面渲染和更新，从而提供更高效的用户界面。
使用Jquery与vuejs操作dom比较
weixin_30770783的博客
08-12 653
jquery实现添加功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>aaa</title> <script src="//cdn.bootcss.com/jquery/3....
原生JS，JQuery，Vue，React中的Dom操作
z16600248502的博客
08-14 641
1 . 获取Dom元素 <div id ="A' style=""></div> div --->dom元素 id style 这些是 属性 原生的就就不写了 1.1JQ中 $('div')//dom $('#a')//id $('.a')//class $('div')eq(1) //而且eq（1）数组中第2个元素 1.2Vue中 1.在指定元素上，添加ref=“名称A”，在获取的地方加入 this.$refs.名称A <div ref='A'></
Vue里面的虚拟DOM真的比真实DOM快吗？
qq_44473483的博客
06-02 1448
Vue里面的虚拟DOM并非就比原生DOM快。
NoDom和Vue的区别
weixin_33868027的博客
10-31 397
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue：字符串模板和dom模板的区别
laurel_y的博客
05-31 1170
最近看到vue官方文档的时候，多次提及字符串模板和dom模板，对这个概念比较模糊，经查阅后记录供日后参考。 1.字符串模板 字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。 Vue.component('MyComponentA', { template: '<div MyId="123"&g
前端面试必刷/跨域/浏览器工作原理/Vue/React/性能优化
12-06
Vue以其简洁易学的API和组件化思想受到广大开发者喜爱，它的响应式系统和虚拟DOM使得开发高效且易于维护。而React则以其组件化的开发模式和JSX语法著称，通过React Hooks的引入，使得状态管理和副作用处理更加灵活。...
详解操作虚拟dom模拟react视图渲染
10-18
每次状态变更时，React不会直接操作真实DOM，而是先更新虚拟DOM，然后通过比较新旧虚拟DOM的差异来确定具体需要更新的部分。最后，React仅对真实DOM进行必要的最小改动，从而实现快速且高效的界面更新。 在直接操作...
virtual DOM和真实DOM的区别_详解Vue中的虚拟DOM
weixin_39713317的博客
11-20 729
摘要： 什么是虚拟DOM?作者：浪里行舟Fundebug经授权转载，版权归原作者所有。前言Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了内存消耗。那么，什么是Virtual DOM？为什么需要Virtual DOM？它是通过什么方式去提升页面渲染效率的呢？这是本文所要探讨的问题。模板转换成视图的过程在正式介绍 Virtual Dom...
React 学习笔记（4）：虚拟 DOM 和真实 DOM 的比较
f18855666661的博客
02-11 1449
例子代码： <script type="text/babel" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById
React之 ref 和 DOM
web-gm的博客
04-18 827
在常规的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。然而，在少数情况下，你需要在常规数据流外强制修改子元素。被修改的子元素可以是 React 组件实例，或者是一个 DOM 元素。在这种情况下，React 提供了解决办法。 何时使用Ref 处理focus、文本选择器或者媒体播放 触发强制动画 集成第三...
【面试题】当面试官让我回答React和Vue框架的区别......
web全栈开发的博客
09-26 3381
虚拟 DOM（Virtual DOM）本质上是JS 和 DOM 之间的一个映射缓存，它在形态上表现为一个能够描述 DOM 结构及其属性信息的 JS 对象。它主要存储在内存中。虚拟dom是一个js对象，存储在内存之中。虚拟dom能够描述真实dom（存在一个对应关系）当数据变化的时候，生成新的DOM，对比新旧虚拟DOM的差异，将差异更新到真实DOM上。
从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
weixin_34025151的博客
05-23 140
前言 接上文：谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo 上次写完博客后，有朋友反应第一内容有点深，看着迷迷糊糊；第二是感觉没什么使用场景，太过业务化，还不如直接写Vue&amp;react的源码分析，我感觉这里有必要说下我的认识。 首先，要写源码分析很难，第一是他本来就很难，所以一般我们是想了解他实现的思路而不是代码； 第二每个开发者有自己发风格，所以你要彻...
vue与react虚拟dom对比
qq_41123620的博客
01-29 3183
虚拟dom: 同 vue和react都采用了虚拟dom算法，以最小化更新真实DOM，从而减小不必要的性能损耗。 按颗粒度分为tree diff, component diff, element diff. tree diff 比较同层级dom节点，进行增、删、移操作。如果遇到component， 就会重新tree diff流程。 差异 dom的更新策略不同 react 会自顶向下全diff. vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。 1. 在react中，当状态发生改变时，组件
virtual DOM和真实DOM的区别_jq和vue区别
weixin_39559333的博客
11-23 179
前言：很多人说jquey和vue没有什么可比的，应该和Angular，React来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据上去，难道不是一个根本性的改变吗？1.jquery介绍：想必大家都用过jq...
virtual DOM和真实DOM的区别_vue渲染过程解析-VDOM &DOM
weixin_39897749的博客
11-21 295
前言从上篇文章《vue编译过程分析》中，我们了解到HTML模板经过编译，最终会生成一个render函数。render函数的主要功能是生成vnode。在vue的渲染过程中总共涉及两大工作：创建vnode和创建DOM节点。本篇文章作为上一篇的延续，重点聊聊渲染过程的实现。vnode创建大家知道一个复杂的页面会包含大量的DOM节点，为了高效地更新这些DOM节点，vue设计了虚拟DOM的概念。虚拟DOM是...
3 Reactjs ref 和 DOM
dabusidede的博客
07-17 313
在常规的 React 数据流中，props是父组件与子组件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。然而，在少数情况下，你需要在常规数据流外强制修改子元素。如下： Ref ref可以让我们获取到原始的dom元素 何时使用 Refs 处理focus、文本选择或者媒体播放 触发强制动画 集成第三方DOM库 不要过度使用 Refs 在 DOM 元素上添加 Ref React 支持给任何组件添加特殊属性。ref属性接受回调函数...
VUE 与REACT获取真实的DOM节点
xcodebin的博客
07-11 1140
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React与VUE 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现需要注意的是，由于 this.refs.[r...
vue 和 react 虚拟dom 更新的区别
07-13
当数据发生变化时，Vue 和 React 会通过比较新旧虚拟 DOM 树的差异来确定需要更新的部分，并且只更新需要更新的部分，而不是直接操作真实的 DOM。 在 Vue 中，当数据发生变化时，Vue 会先生成一个新的虚拟 DOM 树，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值