Vue篇(2)虚拟DOM与DOM diff

最新推荐文章于 2022-09-05 13:20:14 发布
最新推荐文章于 2022-09-05 13:20:14 发布
阅读量159 收藏
点赞数
分类专栏： 前端常见问题 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124792310
版权
本文探讨了虚拟DOM的概念，解释了为何虚拟DOM比真实DOM更高效，主要优点包括减少DOM操作和跨平台渲染。虚拟DOM通过DOM diff算法优化更新过程，避免不必要的DOM操作。同时，文章提到了虚拟DOM的缺点，如需要额外创建函数，并讨论了JSX的使用及其依赖打包工具的问题。此外，还对比了Vue与React在处理虚拟DOM上的差异。
摘要由CSDN通过智能技术生成

目录

1.问:虚拟DOM是什么?

2.问:为什么我们说虚拟DOM是比真实DOM快的?

3.问:虚拟DOM的优点有哪些?

减少DOM操作

跨平台渲染

4.虚拟DOM有什么缺点?

5.那么你用这些方法(JSX)转义以后,他又有什么缺点呢?(上图的两种写法有什么缺点)

再来两个有趣的点

babel不是转换JS的吗?怎么还可以转换React呢?

Vue为什么不能通过babel非要用vue-loader呢?

6.什么事DOM diff

1.问:虚拟DOM是什么?

一个能代表DOM树的对象,通常含有标签名、标签上的属性、事件监听和子元素们,以及其他属性

2.问:为什么我们说虚拟DOM是比真实DOM快的?

3.问:虚拟DOM的优点有哪些?

(2-3问都可以用下面的回答)

减少DOM操作

虚拟DOM可以将多次操作合并为一次操作,比如你添加1000个div,你用JS怎么写,你会一个一个添加,但是现在react和vue怎么做,你就往数组里面放1000个文本,我一次性把它放到页面上,这就减少了DOM操作(减少DOM操作的次数)

虚拟DOM借助DOM diff 可以把多余的操作省掉,比如你添加1000个节点,其实只有10个是新增的,那么我们借助虚拟DOM,它会发现有的本来已经在页面中的数据,他就不更新了,只添加我们新增的10个(减少DOM操作的范围)

跨平台渲染

虚拟DO

最低0.47元/天 解锁文章
学无止境QAQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础虚拟DOM和diff算法
ADwblj的博客
12-09 153
vue基础虚拟DOM和diff算法
前端页面卡顿、也许是DOM操作惹的祸？
cxu123321的博客
06-05 861
前端页面卡顿、也许是DOM操作惹的祸？ 界面上UI的更改都是通过DOM操作实现的，并不是通过传统的刷新页面实现 的。尽管DOM提供了丰富接口供外部调用，但DOM操作的代价很高，页面前端代码的性能瓶颈也大多集中在DOM操作上，所以前端性能优化的一个主要的关注 点就是DOM操作的优化。DOM操作优化的总原则是尽量减少DOM操作。 先来看看DOM操作为什么会影响性能 在浏览器中，DOM的实现和ECMAScript的实现是分离的。比如 在IE中，ECMAScrit的实现在jscript.dll中，而DOM的实
vue---减少操作dom，一步步养成好习惯
maidu_xbd的博客
07-23 1048
最近在做人脸识别会议签到的项目，签到过程描述如下： 签到前人脸图像上方增加了一层“遮罩”，为暗色；签到后点亮头像，为外层div添加样式class="signend"即可去掉“遮罩”层。 <div class="people" id="peopleList" @scroll="scroll" ref="peopleList"> <div v-for=...
【vue设计与实现】简单Diff算法 1-减少DOM操作的性能开销
loyd3的博客
09-05 482
这种做法问题也很明显，这里假定的是新的一组子节点的数量和旧的相同，但是新旧两组子节点的数量未必相同。类似地，新的一组子节点的数量也可以比旧的多，这时候应该挂在新增节点。之前针对两组子节点的更新，采用了一种简单直接的手段，即卸载全部旧子节点，再挂在全部新子节点。关于Diff算法，简单来说，当新旧vnode的子节点都是一组节点的时候后，为了以最小的性能开销完成更新操作，需要比较两组子节点，用于比较的算法就叫Diff算法。因此，在更新时，不应该是遍历旧的一组子节点，而是遍历其中长度较短的那一组。
Vue.js设计与实现读书笔记九 第九章 简单Diff算法
qq_24986271的博客
09-02 247
这一节要解决的问题，就是第八章的时候比较Vnode新与旧的的子节点，当新与旧的子节点都是一组的情况，之前的方法是直接将所以旧的子节点，调用unmount循环全部卸载掉，这样做会导致性能开销，要先卸载，然后再重新渲染，如果能复用节点，将节省性能，特别是如果子节点变化不大，如果能精准更新旧更好了，这一节，要解决的就是当新子节点中没有，旧子节点有的节点的删除，主要的问题是如何找到旧不可复用的子节点。如图，新子节点p-3对应的可复用的旧子节点的索引最大为2，而新的子节点p-1，p-2都比。
虚拟 DOM 和 DOM diff
weixin_46787337的博客
04-14 118
什么是虚拟DOM Virtual dom, 即虚拟DOM节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点。 虚拟DOM就是一个普通的JavaScript对象，包含了tag、props、children等属性。 虚拟dom的实现过程 通过js建立节点描述对象 diff算法比较分析新旧两个虚拟DOM差异 将差异patch到真实dom上实现更新 如何生成一个dom这里我们拿react来举例 createElement createElement
深入理解Vue2.x的虚拟DOM diff原理
08-29
深入理解Vue2.x的虚拟DOM diff原理 Vue2.x的虚拟DOM diff原理是指 Vue2.x 中的一种高效的渲染机制，它通过对比虚拟DOM和真实DOM之间的差异来实现快速渲染。下面我们将深入了解 Vue2.x 的虚拟DOM diff原理。 虚拟...
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
深入Vue2.x的虚拟DOM diff原理.md
07-29
Vue的核心是双向绑定和虚拟DOM, vdom因为是纯粹的JS对象，所以操作它会很高效，但是vdom的变更最终会转换成DOM操作，为了实现高效的DOM操作，一套高效的虚拟DOM diff算法显得很有必要。
Vue的虚拟DOM及diff算法
weixin_51670675的博客
04-15 2184
通过篇文字，你能了解到：为什么引入虚拟DOM？为什么操作DOM慢？Vue的怎么对比节点？怎么复用节点？v-for中key 的作用是什么？没有key为什么反而快了？Vue3在diff算法方面做了哪些优化？
vue笔记3 虚拟dom、重流、diff
qq_44613178的博客
03-17 1292
老规矩 先放链接致敬作者 使用虚拟dom和真实dom的区别 详细理解重绘与回流/重排的过程 display:none和visibility:hidden两者的区别 v-if和v-show、display: none和visibility：hidden的区别 vue核心之虚拟DOM(vdom) 深入 React 之 diff 算法 虚拟dom 真实DOM操作： document.get…查询的是整个节点树。 ParentNode.querySelector()和ParentNode.querySelector
vue中dom操作
風缘的博客
12-12 3889
this.$el 当前组件最外层div &lt;template&gt; &lt;!-- &lt;div class="hot-wrap" v-on:contextmenu.prevent = "create"&gt; --&gt; &lt;div class="hot-wrap" @mousedown.self = "mousedownHandle"&gt
vue 中对dom的增加 删除
callBack_____的博客
06-10 580
vue 中对dom的增加 删除
vue指令以及dom操作
热门推荐
小漠007的专栏
02-19 1万+
“AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。”这是我最初接触“指令”这个词。还记得那时候，ng大行其道的时候，我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题。后来随着前端工作的深入，我用了jq的data-attr并且学会了jq的插件使用。但，这这并不能让我把它“指令...
前端vue 里的tab切换 减少dom操作
weixin_30896825的博客
09-19 228
<div class="vuedemo"> <div class="all"> <div class="tabone" v-bind:class="idns==0?'no':''" v-on:click="idns=0">tab1</div> <div class="tabone" v-bind:cl...
说一下减少dom的办法？一次性给你大量的dom怎么优化？
一夜枫林
07-27 4666
一、减少dom数量的方法 可以使用伪元素，阴影实现的内容尽量不使用DOM实现，如清除浮动、样式实现等； 按需加载，减少不必要的渲染； 结构合理，语义化标签 二、大量DOM时的优化 当对Dom元素进行一系列操作时，对Dom进行访问和修改Dom引起的重绘和重排都比较消耗性能，所以关于操作Dom，应该从以下几点出发： 1. 缓存Dom对象 首先不管在什么场景下。操作Dom一般首先会去访问Dom，尤其是像循环遍历这种事件复杂度可能会比较高的操作/那么可以在循环之前就将主节点，不必循环的Dom节点先获取到，那么在
为什么要减少DOM操作
silentCoder的博客
03-05 3654
今天，在这学习vue，突然想到一个问题，我jQuery用的这么爽，看到什么元素，想操作dom就直接选中进行变化，好像没什么不方便的啊？那为啥我用的jQuery操作dom的构建页面的方法就这么被淘汰了呢？那就问百度吧。结果基本一面倒的都在说需要减少dom层的操作，原因，就是因为操作dom慢。至于为啥慢，就涉及到浏览器渲染页面。浏览器分为：渲染引擎和js引擎。渲染引擎工作：解析HTML代码，生产DOM...
vue中的虚拟dom和diff算法
最新发布
06-08
在Vue中，当数据发生变化时，Vue会重新渲染虚拟DOM树，与之前的虚拟DOM树进行比较，并计算出最小化的DOM操作，然后将这些操作应用于真实的DOM上，从而更新页面显示。这种方式可以提高页面性能，同时也避免了手动操作...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值