对虚拟dom和diff算法的理解

已于 2022-09-27 19:59:10 修改
阅读量325 收藏 1
点赞数 1
分类专栏： react相关 文章标签： javascript 开发语言 ecmascript
于 2022-09-27 19:50:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oLylia/article/details/127077313
版权

虚拟dom

虚拟dom就相当于在js和真实dom之间加了一个缓存，react在开发时所有的dom操作都是通过虚拟dom进行的，每当数据发生变化，React都会重新构建整个dom树，通过diff算法对当前dom树和之前dom树进行比对，得到两者的变化部分，仅对变化的部分进行更新，从而提高性能

diff算法

diff算法就是用于比较新旧两个虚拟dom差异的一种算法，通过比较得出新旧dom变化的部分，只针对该部分进行原生dom操作，而不会使整个页面进行重绘。

diff算法会先把dom树按照层级进行分解，比较同一层级的元素

如果发现新旧节点类型不同，则会插入新的节点，删除旧的节点

如果新旧节点类型相同，则会重新设置该属性

如果是列表节点的比较，需要给他的每个单元添加唯一的key才能进行高效的比较

 

别放弃我还在努力
关注
专栏目录
React进阶-虚拟 DOM 和 Diff 算法
m0_62118859的博客
05-03 1505
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 662
什么是虚拟dom大家一定要记住的一点就是，虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。虚拟dom的结构从下图中，我们来看一看虚拟dom结构到底是怎样的如上图，这就是虚拟dom的结构，他是一个对象，下面有6个属性，sel表示当前节点标签名，data内是节点的属性，elm表示当前虚拟节点对应的真实节点（这里暂时没有），text表示当前节点下的文本，children表示当前节点下的其他标签虚拟dom的作用我们在最后整理一下步骤。...
虚拟DOM和Diff算法的理解
余的博客
04-26 493
目录1.虚拟 dom2.diff 算法 1.虚拟 dom 虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要
虚拟dom和diff算法的简单理解与总结
ljb376766764的博客
07-28 274
虚拟dom和diff算法的简单理解与总结
深入理解虚拟DOM 和 Diff 算法
lucky_ferry的博客
11-30 734
什么是虚拟DOM? 简单来说 虚拟DOM 就是一个JS 对象，用对象的形式来描述DOM 结构； 具体怎么表示？DOM 结构包含很多的属性，节点的类型包含：文本节点，标签节点和属性节点。 <div> <p style="color:red">Hello</p> <span style="border:1px solid red;color:green">World</span> </div&gt
简单介绍虚拟DOM和diff算法
果车的博客
01-30 774
一、diff算法简介： 上面代码的改变有很多种方式，第一种：我们可以将左边box这个div全都删掉然后替换成右边这个div（但这种方式感觉太大费周章），第二种方法：是我们可以保持原有的内容不发生变化只添加新增的内容。 像第二种这样进行精细化对比实现最小量更新我们称为diff算法。 二、虚拟DOM ： 用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。 diff算法是在两个虚拟DOM之间计算的，新虚拟DOM和老虚拟DOM进行diff(精细化比较.
虚拟DOM和diff算法的分析理解
yu_yuxiaoer的博客
06-19 411
1.什么是dom，什么是虚拟dom
虚拟DOM与diff算法.doc
07-09
在现代Web开发中，虚拟DOM（Virtual DOM）与diff算法是提高应用性能的关键技术，特别是在Vue和React等框架中。它们解决了直接操作DOM导致的性能问题，使得开发者可以更高效地处理用户界面的更新。 虚拟DOM是一种...
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
虚拟DOM（Virtual DOM）和diff算法是现代前端框架的核心技术之一，特别是对于Vue这样的响应式框架来说，它们扮演着至关重要的角色。在介绍Vue的虚拟DOM和diff算法之前，我们首先需要了解什么是虚拟DOM以及为什么需要...
虚拟DOM和Diff算法
Amethyst的博客
03-31 1456
文章目录虚拟DOM和diff算法虚拟DOMDiff算法单节点diff多节点diffreact中key值的作用如何理解fiberReact的双缓存机制 虚拟DOM和diff算法 虚拟DOM 背景：以前使用jq等命令式的完成一些DOM操作，伴随着前端工程化的不断发展，涌现了react、vue等MVVM框架，不用再关心具体的DOM操作，而是把重点放在了基于数据状态的操作，一旦数据更改，相应的DOM元素也会跟着变化，这种声明式的开发方式极大地提高了开发体验，更好地帮助我们实现组件复用、逻辑解耦等 虚拟DOM 本质上
关于虚拟DOM和Diff算法的理解及应用场景
lijiangzhao的博客
09-20 583
1、vue虚拟dom 虚拟DOM不是真实的DOM， 而是一个JS对象。它的作用是判断DOM是**否改变、 哪些部分需要被重新渲染**。 vdom完全是用js去实现，和宿主浏览器没有任何联系，此外得益于js的执行速度，将原本需要在真实dom进行的创建节点,删除节点,添加节点等一系列复杂的dom操作全部放到vdom中进行，这样就通过操作vdom来提高直接操作的dom的效率和性能。 2、vue diff 算法 #（1）为什么有diff算法： diff算法用来修改一小段dom，不会引起dom树的重绘 #（2）dif
了解虚拟DOM和diff算法
wade3po的博客
07-19 176
今天分享一下虚拟DOM和diff算法，当然，只是非常简单的了解一下，知道这两个东西的概念。 起初我还一直把DOM当做是标签的那些元素，后来才知道，我们说的DOM全称 Document Object Model，即文档对象模型，是JavaScript的对象，用来表示页面标签的元素，这个对象提供了一系列操作DOM的API。也就是说DOM是js用来表示元素的对象，我们可以通过这个对象去操作页面的元素。可...
阐述一下你对虚拟DOM和Dom-Diff理解？
qq_40588413的博客
03-25 567
随着前端领域快速发展，越来越多的前端框架不断涌现，当下React、Vue两个前端框架已经是前端开发者必备技能。曾经我面试经常被问到：你了解虚拟DOM吗？简单说一下diff算法？你研究过R...
快速了解虚拟DOM和diff算法
weixin_46468143的博客
02-24 140
什么是 虚拟DOM？ 虚拟DOM是一个用来 展示真实DOM的对象 真实DOM <div id="app"> <ul id='list'> <li class='item'>张三</li> <li class='item'>李四</li> <li class='item'>王五</li> </ul>
虚拟dom
caopinpin的博客
07-13 152
虚拟DOM与真实DOM的区别 虚拟DOM不会进行排版与重绘操作 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗 真实DOM频繁排版与重绘的效率是相当低的 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部 使用虚拟DOM的损耗计算： 总损耗 =...
虚拟 dom
lk19910323的博客
04-26 305
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom 如果组件内有响应的数据，数据发生改变的
什么是虚拟DOM和diff算法?
Kodomo
11-19 678
一、什么是虚拟DOM 虚拟DOM其实就是相对于浏览器的真实DOM所渲染出来的一个用来描述真实DOM结构的JS对象
详解虚拟DOM与Diff算法
油墨香^-^的博客
06-24 961
最近复习到虚拟DOM与Diff，翻阅了众多资料，特此总结了这篇长文，加深自己对vue的理解。 这篇文章比较详细的分析了vue的虚拟DOM,Diff算法，其中一些关键的地方从别处搬运了一些图进行说明(感谢制图的大佬)，也包含比较详细的源码解读。 真实DOM的渲染 在讲虚拟DOM之前，先说一下真实DOM的渲染。 浏览器真实DOM渲染的过程大概分为以下几个部分： 构建DOM树。通过htmlparser解析处理html标记，将它们构建为DOM树(DOM tree)，当解析器遇到非阻塞资源(图片，.
对前端中的虚拟dom和diff算法的一些理解
huhu_nihao的博客
06-26 1038
对前端中的虚拟dom和diff算法的一些理解 一、虚拟dom是什么？ 我们先看一下下面的这个需求： 有一个变量 count 的初始值时 0，经过一系列运算，得到10001，然后将结果写入box中 我们可能会这么写： var box = document.querySelector( '.box' ) var count = 0 ; console.time( 'a' ) for( va...
谈谈你对 虚拟 DOM 和 diff 算法的理解？
最新发布
03-29
虚拟 DOM 是一种抽象的 DOM 结构，在实际的 DOM 操作中，通过比较两个虚拟 DOM 树的差异，然后只更新发生变化的部分，从而避免了大量的 DOM 操作，提高了性能。 diff 算法是虚拟 DOM 实现的核心算法。它的主要思想是通过比较两个虚拟 DOM 树的差异，然后只更新发生变化的部分，从而避免了大量的 DOM 操作，提高了性能。具体来说，diff 算法会先比较两个虚拟 DOM 树的根节点，如果节点类型不同，则直接替换掉旧节点，如果节点类型相同，则比较节点属性，如果属性不同，则更新属性，如果属性相同，则比较子节点。 在进行子节点比较时，diff 算法会采用以下几种策略： 1. 新节点数量比旧节点多：直接插入新节点。 2. 新节点数量比旧节点少：删除多余的旧节点。 3. 新旧节点数量相等：逐个比较节点。 4. 节点位置发生变化：移动节点位置，而不是删除和插入。 总的来说，虚拟 DOM 和 diff 算法是一种性能优化技术，可以避免大量的 DOM 操作，提高页面性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别放弃我还在努力

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值