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

最新推荐文章于 2022-09-26 14:56:44 发布
最新推荐文章于 2022-09-26 14:56:44 发布
阅读量781 收藏 2
点赞数 3
分类专栏： Vue知识 文章标签： react.js vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43416349/article/details/120580622
版权

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

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

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

一路向阳~负责的男人
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试必刷/跨域/浏览器工作原理/Vue/React/性能优化
12-06
前端面试必刷/跨域/浏览器工作原理/Vue/React/性能优化
使用Jquery与vuejs操作dom比较
weixin_30770783的博客
08-12 613
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 559
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 1308
Vue里面的虚拟DOM并非就比原生DOM快。
NoDom和Vue的区别
weixin_33868027的博客
10-31 349
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue：字符串模板和dom模板的区别
laurel_y的博客
05-31 900
最近看到vue官方文档的时候，多次提及字符串模板和dom模板，对这个概念比较模糊，经查阅后记录供日后参考。 1.字符串模板 字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。 Vue.component('MyComponentA', { template: '<div MyId="123"&g
React 学习笔记（4）：虚拟 DOM 和真实 DOM 的比较
f18855666661的博客
02-11 1380
例子代码： <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 756
在常规的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。然而，在少数情况下，你需要在常规数据流外强制修改子元素。被修改的子元素可以是 React 组件实例，或者是一个 DOM 元素。在这种情况下，React 提供了解决办法。 何时使用Ref 处理focus、文本选择器或者媒体播放 触发强制动画 集成第三...
【面试题】当面试官让我回答React和Vue框架的区别......
web全栈开发的博客
09-26 2912
虚拟 DOM（Virtual DOM）本质上是JS 和 DOM 之间的一个映射缓存，它在形态上表现为一个能够描述 DOM 结构及其属性信息的 JS 对象。它主要存储在内存中。虚拟dom是一个js对象，存储在内存之中。虚拟dom能够描述真实dom（存在一个对应关系）当数据变化的时候，生成新的DOM，对比新旧虚拟DOM的差异，将差异更新到真实DOM上。
从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
weixin_34025151的博客
05-23 99
前言 接上文：谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo 上次写完博客后，有朋友反应第一内容有点深，看着迷迷糊糊；第二是感觉没什么使用场景，太过业务化，还不如直接写Vue&amp;react的源码分析，我感觉这里有必要说下我的认识。 首先，要写源码分析很难，第一是他本来就很难，所以一般我们是想了解他实现的思路而不是代码； 第二每个开发者有自己发风格，所以你要彻...
vue与react虚拟dom对比
qq_41123620的博客
01-29 3043
虚拟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 129
前言：很多人说jquey和vue没有什么可比的，应该和Angular，React来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据上去，难道不是一个根本性的改变吗？1.jquery介绍：想必大家都用过jq...
virtual DOM和真实DOM的区别_vue渲染过程解析-VDOM &DOM
weixin_39897749的博客
11-21 239
前言从上篇文章《vue编译过程分析》中，我们了解到HTML模板经过编译，最终会生成一个render函数。render函数的主要功能是生成vnode。在vue的渲染过程中总共涉及两大工作：创建vnode和创建DOM节点。本篇文章作为上一篇的延续，重点聊聊渲染过程的实现。vnode创建大家知道一个复杂的页面会包含大量的DOM节点，为了高效地更新这些DOM节点，vue设计了虚拟DOM的概念。虚拟DOM是...
3 Reactjs ref 和 DOM
dabusidede的博客
07-17 268
在常规的 React 数据流中，props是父组件与子组件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。然而，在少数情况下，你需要在常规数据流外强制修改子元素。如下： Ref ref可以让我们获取到原始的dom元素 何时使用 Refs 处理focus、文本选择或者媒体播放 触发强制动画 集成第三方DOM库 不要过度使用 Refs 在 DOM 元素上添加 Ref React 支持给任何组件添加特殊属性。ref属性接受回调函数...
VUE 与REACT获取真实的DOM节点
xcodebin的博客
07-11 1085
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React与VUE 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现需要注意的是，由于 this.refs.[r...
React和Vue的虚拟Dom之间的区别对比
qq_40957332的博客
08-24 579
react函数式组件思想，当你用setState就会遍历diff当前组件所有的子节点子组件，这种方式开销是很大的，所以react16采用了fiber链表代替之前的树，是可以中断的，分片的在浏览器空闲的时候执行 vue 组件响应式思想 采用代理监听数据，我在某个组件里修改数据，就会明确知道那个组件产生了变化，只用 diff 这个组件就可以了 参考 ...
一文带你了解 vue 之虚拟 dom
zjjcchina的博客
12-02 498
在面试的过程中，可能也会被问到对虚拟 dom 的理解，像这种面试题是比较宽泛的，面试官想知道你到底知道多少？既然是理解，那就只能是知无不言言无不尽,尽量组织下语言多说点，这样才显得专业素养比较高，接下来，我来谈谈自己的理解，切记不要去背，一定要理解之后，用自己的语言来描述出来。 我们可以从以下四个方面来回答： 什么是虚拟 dom 虚拟 dom 本质上就是一个普通的 JS 对象，用来描述视图上应该有哪些界面结构，并不生成界面。我们可以在生命周期 mounted 阶段打印一下this._vnode，如下：
vue中不推荐操作dom？
qq_38935512的博客
09-09 3242
在vue官方文档中是不推荐直接操作DOM，遇到不可避免得情况下，也是可以操作DOM得。 不推荐操作DOM得缘由总结了几点 1.性能得损耗，操作DOM是及其损耗性能得，相信大多数人都不会推荐操作大量得DOM，而是从数据层入手，比较流行得vue, react,angular等都不是直接操作DOM得 2.代码得质量会降低，出现一些多余得代码，经常直接操作DOM 会导致一些不可预测得问题，当你在一个组件当...
Vue.js---内置指令与自定义指令
weixin_52462962的博客
03-23 570
挑战每天更一篇--Day4
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、付费专栏及课程。

余额充值