什么是虚拟Dom、diff算法

最新推荐文章于 2022-11-19 14:34:57 发布
最新推荐文章于 2022-11-19 14:34:57 发布
阅读量195 收藏
点赞数
分类专栏： vue 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/net_worker_/article/details/108722007
版权

虚拟Dom（virtual dom）是一个js对象，用来模拟真实dom中的节点结构。

为什么使用virtual dom？（dom的优化原理）

虚拟dom采用object对象的写法， 极大的提升了我们使用dom操作网页的性能。

虚拟dom的生成过程：

  1. 获取数据
  2. 创建vdom
  3. 通过render函数解析jsx，将其转换成 vdom结构
  4. 将vdom转换为真实dom
  5. 数据更改
  6. 使用diff算法，调用patch函数对比两次dom不同
  7. 根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）

上面说到了diff算法，diff是什么？

很简单，

一种算法用来找出变化前后 vdom的不同的。

实现过程也很简单：

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁

很抽象的一张图：
在这里插入图片描述
不过能表达出意思即可

React进阶-虚拟 DOM 和 Diff 算法
m0_62118859的博客
05-03 1534
1.虚拟 DOM 虚拟 DOM（Virtual DOM），就是一个 JS 对象，用来描述我们希望在页面中看到的 HTML 结构内容. 为什么使用虚拟 DOM？ 真实 DOM 对象属性多，处理起来繁琐、效率低。更重要的原因：React 要做跨平台开发，而不是被束缚在浏览器端。 原生 DOM 对象： 也是一个 JS 对象，是浏览器默认提供的 DOM 对象 和 HTML 元素之间是一一对应的关系 const element = { type: 'h1', props: { clas.
vue 虚拟dom和diff算法详解
geejkse_seff的博客
07-31 688
什么是虚拟dom大家一定要记住的一点就是，虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。虚拟dom的结构从下图中，我们来看一看虚拟dom结构到底是怎样的如上图，这就是虚拟dom的结构，他是一个对象，下面有6个属性，sel表示当前节点标签名，data内是节点的属性，elm表示当前虚拟节点对应的真实节点（这里暂时没有），text表示当前节点下的文本，children表示当前节点下的其他标签虚拟dom的作用我们在最后整理一下步骤。...
什么是虚拟dom，和 diff 算法
weixin_44190647的博客
09-02 211
什么是虚拟dom，和 diff 算法 1、虚拟 DOM 的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话，会有很多不必要的 DOM 操作。例如，一个 ul 标签下很多个 li 标签，其中只有一个 li 有变化，这种情况下如果使用新的 ul 去替代旧的 ul,因为这些不必要的 DOM 操作而造成了性能上的浪费。 为了避免不必要的DOM 操作，虚拟 DOM 在虚拟节点映射到视图的过程中， 将虚拟节点与上一次渲染视图所使用的旧虚拟节点（oldVnode）做对比，找出真正需要更新的节点来进
什么是虚拟DOM和diff算法？
xinshoudandan的博客
04-26 335
1、虚拟DOM 虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom 如果组件内.
浅谈vue虚拟dom，diff算法
m0_51328823的博客
02-07 448
vue中的虚拟dom 什么是虚拟dom? 虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。 简单来说：本质上是js对象,这个对象就是更加轻量级的对DOM的描述 为什么要创建虚拟dom? 创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。 vue中diff算法 diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个
虚拟dom的diff算法
qq_37344190的博客
01-05 293
今天看到一篇关于diff算法的博客：https://www.cnblogs.com/wind-lanyan/p/9061684.html 茅塞顿开，醍醐灌顶，一下懂了，写下心得，以后再来读。 virtualDOM和虚拟dom的区别：虚拟dom以对象形式存在。当我们修改了数据的时候，如果每次都触发dom的重绘和回流会在很大程度上影响性能，所以采用diff算法： diff算法会将同级的虚拟dom...
什么是虚拟dom？什么是diff算法？详解
weixin_48333948的博客
10-16 259
什么是虚拟dom？ 虚拟DOM其实就是一个js对象，就是用对象的方式取代真实的DOM操作，把真实的DOM操作放在内存当中，在内存中的对象里做模拟操作。当页面打开时浏览器会解析HTML元素，构建一颗DOM树，将状态全部保存起来，在内存当中模拟我们真实的DOM操作，操作完后又会生成一颗dom树，两颗DOM树进行比较，根据diff算法比较两颗DOM树不同的地方，只渲染一次不同的地方。 diff 算法包括几个步骤： ①用js对象构造一个虚拟的dom树，插入到文档中； ②状态变更时，记录新树和旧树的差异； ③把上面的
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
在介绍Vue的虚拟DOM和diff算法之前，我们首先需要了解什么是虚拟DOM以及为什么需要使用虚拟DOM。 虚拟DOM是一个用JavaScript对象来模拟真实DOM的结构和属性的抽象层。它能够描述出DOM结构的层次关系和各个节点的...
虚拟DOM与diff算法.doc
07-09
《虚拟DOM与diff算法》 在现代Web开发中，虚拟DOM（Virtual DOM）与diff算法是提高应用性能的关键技术，特别是在Vue和React等框架中。它们解决了直接操作DOM导致的性能问题，使得开发者可以更高效地处理用户界面的...
什么是虚拟DOM?(vue,react)什么是diff算法?
苦夏木禾
04-27 386
虚拟DOM什么是DOMDOM树为什么原生JS会浪费性能?什么是虚拟DOM？工作原理为什么虚拟DOM性能更优秀？什么是diff算法？     在这三个框架中(vue,react),都是使用虚拟DOM来提高效率的,那么来说说什么是虚拟DOM?为什么要用?还有它是怎么工作的? 什么是DOM 浏览器中的一个概念,用JS对象来表示页面上的元素,并提供用于操作DOM对象的API DOM树 一个网页呈现的概念 网页呈现的过程: 浏览器请求服务器获取页面HTML代码 浏览器要先在内
什么是虚拟DOM和diff算法?
最新发布
Kodomo
11-19 698
一、什么是虚拟DOM 虚拟DOM其实就是相对于浏览器的真实DOM所渲染出来的一个用来描述真实DOM结构的JS对象
虚拟dom和diff算法是什么
m0_71710542的博客
08-18 212
diff 算法 是什么： 简单来说： 1.diff算法是精细化对比最小量的更新。 2.diff算法可以让Dom以最小的代价进行更新。 3.diff算法会优先遍历，以及对比差异，在代码中会对新旧Dom树进行深度遍历，以及每个节点都会有一个标记。 虚拟dom是什么： 1.web界面由dom树（也叫数据结构）构建，当其一部分发生变化，就是某一个节点发生了变化。 2.设计虚拟dom就是为了解决浏览器性能消耗的问题，若用户一个操作产生多次更新dom动作，虚拟dom不会直接操作dom，它会将这10次.
虚拟DOM 和 diff 算法
weixin_45416189的博客
03-25 1108
虚拟DOM 和 diff 算法 研究1：虚拟DOM如何被渲染函数（h函数）产生？ — 我们手写h函数 研究2：diff 算法原理？— 我们要手写diff 算法 研究3：虚拟DOM 如何通过diff 变成真正的DOM的—事实上，虚拟DOM变成真正的，是涵盖在diff算法里面的 项目创建 创建文件夹：vnode 使用npm init 管理vnode 文件 安装 snabbdom npm i -S snabbdom 安装webpack 相关包 npm i -D webpack@5 webpack-cli
虚拟dom和diff算法
weixin_44862325的博客
03-23 175
虚拟DOM ( virtual dom ) 用一个简单的对象去替代复杂的dom对象，存储了对应dom的一些重要参数，在改变dom之前，会先比较相应虚拟dom的数据，如果需要改变，才会将改变应用到真实dom上。 Diff算法 ( 差异算法 ) 可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异，记录下来的不同就是我们需要对页面真正的DOM操作，然后把他们应用在真正的DOM树上，...
9.虚拟DOM与DIFF算法
nqmysb的博客
01-21 291
1.state 数据 2.JS模板 3.数据+模板生成虚拟DOM(一个描述DOM树结构的JS对象) document文档对象 4.根据虚拟DOM的结构生成真实的DOM 渲染 5.state变化 6.数据+模板生成新的虚拟DOM 7新的虚拟DOM和旧的虚拟DOM进行DIFF算法，找出区别 8.根据区别重新区别再来改变真实DOM     JSX ==> createEleme...
虚拟DOM和diff算法（原理）
CIA的博客
10-26 960
虚拟DOM和diff算法（原理）（面试题） 什么是虚拟DOM（virtual DOM）： 所谓的虚拟 dom，也就是我们常说的虚拟节点， 它是通过JS的Object对象模拟DOM中的节点 然后再通过特定的render（渲染）方法将其渲染成真实的DOM的节点。 为什么使用虚拟DOM： 使用js操作DOM时（增删改查等等），那么DOM元素的变化自然会引起页面的回流（重排） 或者重绘，页面的DOM重绘自然会导致页面性能下降，那么如何尽可能的去减少DOM的操作 是框架需要考虑的一个重
虚拟DOM中的diff算法
chenyueliu的博客
05-15 693
什么是虚拟DOM，它的优点 大家知道，我们页面渲染，首先需要构建一个DOM树，用render进行DOM的渲染，传统开发中，每当DOM树中的元素发生改变，都需要重新进行一遍DOM的比对，并且进行真实DOM的渲染，这样是非常损耗性能的。 那么虚拟DOM实际上就是一个JS对象，用来描述真实DOM，如果操作中有多次更新DOM的动作，会用diff算法进行比对，根据新的内容生成一个新的虚拟DOM（createElement），最终把这个虚拟DOM一次性attch到DOM树上，这样就大大节省了性能。虽然看起来新增了一个操
虚拟DOM和diff算法
Tokki_的博客
06-08 1796
虚拟dom 虚拟DOM的本质就是一个JS对象，虚拟DOM减少了真实DOM的操作，当修改数据的时候，就是修改虚拟DOM产生全新的虚拟DOM， 新旧虚拟DOM使用diff算法，得到patch(也就是需要修改的部分)，然后将这个patch打到浏览器的DOM上 （减少重绘和回流，从而达到性能优化的目的） 每次DOM操作会引起重绘或者回流，频繁的真实DOM的修改会触发多次的排版和重绘相当耗性能 ...
React Native探索（四）：虚拟DOM Diff算法解析
Louis的专栏
01-08 4103
React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷 新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明，在实际开发中我们基本无需关心 虚拟DOM是如何运作的。然而，作为有态度的程序员，我们总是对技术背后的原理充满着好奇。理解其运行机制不仅有助于更好的理解React组
深入理解Vue：虚拟DOM与diff算法解析
"Vue虚拟DOM与diff算法解析" 在前端开发领域，Vue和React等现代JavaScript框架广泛使用虚拟DOM（Virtual DOM）以及相应的diff算法来优化性能。本文将深入探讨这两个概念，尤其是针对Vue框架的应用。 虚拟DOM是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值