Vue 虚拟DOM和Diff算法

最新推荐文章于 2022-02-25 15:54:03 发布
最新推荐文章于 2022-02-25 15:54:03 发布
阅读量437 收藏 3
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Huang_DW/article/details/108697990
版权
本文介绍了Vue中的虚拟DOM概念，解释了为何使用虚拟DOM以优化性能，对比了虚拟DOM与真实DOM的区别，并详细阐述了DOM Diff算法如何帮助实现高效更新。
摘要由CSDN通过智能技术生成

什么是虚拟DOM

所谓的Virtual dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。

为什么使用虚拟DOM

虚拟DOM的出现也是为了减弱频繁的大面积重绘引发的性能问题！

既然知道了什么是虚拟DOM，那为什么在Vue或者React这样的框架中，会考虑采用这样的方式？

其实在我们使用JQuery这样的库的时候，我们不禁会大量操作DOM，那么DOM元素的变化自然会引起页面的回流或者重绘，页面的DOM重排自然会导致页面性能下降，那么如何尽可能的去减少DOM的操作是框架需要考虑的一个重要问题！

真实DOM和虚拟DOM的区别

  • 虚拟DOM不会进行排版与重绘操作
  • 真实DOM频繁排版与重绘的效率是相当低的
  • 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
  • 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

看两段简单的代码，也许会更容易理解：

这是一段真实DOM的代码：

最低0.47元/天 解锁文章
୧(不負眾望)૭
关注
专栏目录
【Vue】源码—虚拟DOM和diff算法
军火库
12-22 541
从本质上来说，虚拟DOM是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。虚拟DOM是DOM的抽象，这个对象是更加轻量级的对DOM的描述。新虚拟DOM和旧虚拟DOM进行diff(精细化比较),算出应该如何最小量更新，最后反映到真正的DOM上【虚拟节点变成DOM节点】在Vue里面叫做patch。
vue 虚拟dom和diff算法详解
geejkse_seff的博客
07-31 655
什么是虚拟dom大家一定要记住的一点就是，虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。虚拟dom的结构从下图中，我们来看一看虚拟dom结构到底是怎样的如上图，这就是虚拟dom的结构，他是一个对象，下面有6个属性，sel表示当前节点标签名，data内是节点的属性，elm表示当前虚拟节点对应的真实节点（这里暂时没有），text表示当前节点下的文本，children表示当前节点下的其他标签虚拟dom的作用我们在最后整理一下步骤。...
Vue 虚拟DOM和diff算法
qq_38211443的博客
02-07 1570
vue 中 数据改变 -> 虚拟DOM（计算变更）-> 操作DOM -> 视图更新 虚拟DOM： js执行速度比较快 什么是虚拟DOM？ 用JS模拟DOM结构 为什么需要虚拟DOM？ vue中 数据驱动视图，需要用高效方法来控制DOM操作的次数 diff算法： 虚拟DOM的核心 patch函数 两个使用场景： 首次渲染时，判断第一个参数是否是一个真实dom元素，是的话就创建空vnode，并且关联一个DOM元素，然后..
前端100问：
weixin_43992935的博客
07-10 367
第 1 题：（滴滴、饿了么）写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？ 理解几个概念： （1）当数据发生变化时，vue是怎么更新节点的？ 改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排。 diff算法能够帮助我们，先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后V...
vue虚拟Dom和diff算法
weixin_48456565的博客
01-07 249
一.vue虚拟Dom 什么是虚拟dom？ 用js来模拟DOM中的节点。一个能代表dom树的对象，通常含有标签名，标签上的属性，事件监听和子元素们，以及其他属性 为什么使用虚拟dom Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化， 虚拟DOM就是为了解决浏览器性能问题而被设计出来的 优点 1.减少dom操作 虚拟dom可以将多次操作和并一次操作。比如你，添加1000个节点，却是一个接一个操作（dom操作1000次一次次添加，虚拟dom只操
Vue虚拟DOM和diff算法
weixin_43190804的博客
02-25 763
虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术，都说他能帮助vue和react提升渲染性能，提升用户体验 js执行 —>虚拟DOM( 计算变更) — > 操作真是的DOM —> 视图更新 一.虚拟dom的定义与作用 1.1什么是虚拟dom 虚拟DOM：用JavaScript对象描述DOM的层次结构。虚拟dom就是一个普通的js对象 DOM 中的一切属性都在虚拟DOM中有对应的属性。 1.2 虚拟dom的结构 1.3 虚拟dom的作用 (为什么要使用虚拟DO
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
虚拟DOM（Virtual DOM）和diff算法是现代前端框架的核心技术之一，特别是对于Vue这样的响应式框架来说，它们扮演着至关重要的角色。在介绍Vue的虚拟DOM和diff算法之前，我们首先需要了解什么是虚拟DOM以及为什么需要...
vue虚拟dom和diff算法
最新发布
05-31
Vue使用虚拟DOM来提高性能和效率。虚拟DOM是一个JavaScript对象，它对真实的DOM进行了抽象，用于描述DOM的结构和属性，并保存在...总的来说，Vue的虚拟DOM和Diff算法可以提高性能和效率，使得Web应用更加流畅和快速。
了解Vue的虚拟DOM和diff算法
ChengShengMeJia的博客
08-26 258
了解Vue的虚拟DOM和diff算法前情提要：一、diff算法首先先来了解一下pachpatchVnodeupdateChildren二、虚拟DOM1、 什么是虚拟DOM？2、为什么使用虚拟DOM？3、虚拟DOM和真实DOM的区别？4、虚拟DOM的好处是什么呢？ 前情提要： 相信对于使用或react的人来说很熟悉，而他们常常也扮演着重要的角色，但对于我这种很少使用react，使用vue多一些的来说只能根据vue来展开介绍，有失误地方请无情的鞭策我谢谢 一、diff算法 diff算法主要描述了当数据发生改变
Vue的虚拟dom和diff算法
m0_64969829的博客
02-07 810
一、什么是虚拟DOM 虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DO/M结构，因为不是真实DOM，所以称之为虚拟DOM。 虚拟dom是相对于浏览器所渲染出来的真实dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容,只能通过遍历查询dom树的方式,找到需要修改的dom,然后修改样式行为或者结构，来达到更新视图的目的。 为什么要用虚拟DOM来描述真实的DOM呢？ 创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一
虚拟dom 和 diff算法
小海的博客
10-26 324
虚拟dom .vue文件中的template里写的标签, 都是模板, 都要被vue处理后成虚拟DOM对象, 才会渲染显示到真实DOM页面上 1.内存中生成一样的虚拟DOM结构(本质是个JS对象=) 因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了 比如template里标签结构 <div id="box"> <p class="my_p">123</p> </div> 对应的虚拟DOM结构 const dom = {
vue中的虚拟dom和diff算法
qq_43427385的博客
02-12 759
虚拟dom 概念 虚拟DOM（Virtual DOM）是对DOM的JS抽象表示，它们是JS对象，能够描述DOM结构和关系。应用的各种状态变化会作用于虚拟DOM，最终映射到DOM上。 js在操作数据时希望有个中间层，这个中间层就是虚拟dom操作，当我们对中间层进行操作的时候我希望可以直接转换成dom，那么这中间的两个操作分别是数据响应式和打补丁（patch） 工作机制： js操作=》dom 数据...
Vue.js虚拟dom和diff算法
zhangyuea的博客
04-22 409
Vue.js虚拟dom和diff算法 虚拟dom是什么呢？ 虚拟dom也叫vdom，其实就是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构;vdom一开始刚创建出来就会先渲染一次 来看下代码 //初始的虚拟dom结构 var vdom = { vnode: { tag: 'div', attr: { ...
vuejs中虚拟DOM及diff算法
m0_37716271的博客
04-23 394
虚拟DOM及diff算法 虚拟DOM（virtual dom） 用一个简单的对象去代替复杂的dom对象，存储了对应dom的一些重要参数，在改变don之前，会先比较相应虚拟dom的数据，如果需要改变，才会将改变应用到真实dom上 Diff算法（差异算法） Diff算法（差异算法）：可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异，记录下来的不同就是我们需要对页面真正的DOM操作，然后把...
Vue虚拟Dom和diff算法
@随性的博客
09-20 212
虚拟DOM 到底什么是虚拟DOM呢? Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上 简单来说，可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象(children)三个属性。不同的框架对这三个属性的命名会有点差别 诞生的原因 因为 操作DOM 的代价比较高 ,
virtual DOM和真实DOM的区别_带你了解虚拟 DOM（Virtual DOM）—— Snabbdom 的使用以及源码解析
weixin_39611070的博客
11-23 286
# Study Notes 本博主会持续更新各种前端的技术，如果各位道友喜欢，可以关注、收藏、点赞下本博主的文章。虚拟 DOM（Virtual DOM）什么是 Virtual DOMVirtual DOM(虚拟 DOM)，是由普通的 JS 对象来描述 DOM 对象，因为不是真实的 DOM 对象，所以叫 Virtual DOM真实 DOM 成员let element = document.quer...
浅谈Vue中虚拟DOM和diff算法
Kodio的博客
03-23 362
Vue.js 2 中使用了Virtual Dom（虚拟DOM）来更新DOM节点，提升渲染性能。 我们来总结一下虚拟DOM以及它的Diff算法。 什么是虚拟DOM 我们知道我们平时的页面都是有很多Dom组成，那虚拟Dom(virtual dom)到底是什么，简单来讲，就是将真实的dom节点用JavaScript来模拟出来，而Dom变化的对比，放到 Js 层来做,避免重复大量渲染真实Dom,从而提...
vue 虚拟DOM和diff算法
u010180452的博客
06-28 252
虚拟DOM 和 diff 算法 Vue 是一个 mvvm 框架，Vue高性能的原因之一是使用的 vdom 虚拟dom 是什么？ 是 js 中的对象模型，用对象的结构来模拟真实DOM 虚拟DOM的使用基本流程 先获取数据 ，在创建 jsx 语法糖，然后根据 render 函数将 jsx 生成虚拟对象结构再根据对象结构生成真实的DOM 。当数据改变时， 第二次生成虚拟DOM，然后通过 di...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值