什么是虚拟DOM？为什么要用虚拟DOM？虚拟DOM与真实DOM的区别？

已于 2023-06-10 11:30:43 修改
阅读量281 收藏 1
点赞数 1
文章标签： 前端 vue.js
于 2023-06-10 10:57:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JiangLu7/article/details/131139585
版权

虚拟DOM就是用JS来模拟DOM结构，就是一个普通的js对象

为什么要用虚拟DOM

用传统的api或jQuery去操作DOM时，浏览器回从构建DOM树开始从头到尾执行一遍流程。比如在一次操作中需要更新10哥DOM节点，理想状态是一次性构建完成DOM树，然后再执行操作，但是浏览器在收到第一个更新DOM请求后，并不知道后续还有9次给更新操作，因此会马上执行流程，最终执行10次流程。频繁操作DOM可能会出现页面卡顿，影响用户体验。

虚拟DOM就是为了解决这个浏览器性能问题而被设计出来的，如果一次操作钟有10次更新DOM的操作，虚拟DOM会将这十次更新得到diff内容保存在本地的一个js对向中，最终将这个js对象一次性提交到DOM树上，再通知浏览器执行绘制工作

在实际代码中，会对新旧两棵树进行一个深度的遍历，每个节点都会有一个标记，每遍历一个节点就把该节点和新的树进行对比，有差异就记录到一个对象当中，然后映射到真实的DOM

虚拟DOM与真实DOM的区别

  1. 虚拟DOM不会进行重绘与回流操作
  2. 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需亚奥修改的部分，最终进行重绘与回流，减少过多DOM节点重回回流损耗

diff算法更新虚拟DOM

无key：就地更新

key为index：就地更新

有唯一的key：按key比较更新

J1AngLu7
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
真实DOM和虚拟DOM
qq_40619263的博客
07-30 1953
文章目录如何高效操作DOM什么是DOM浏览器真实解析DOM的流程为什么说操作DOM耗时如何高效操作DOM虚拟DOM什么是虚拟DOM为什么要有虚拟DOM虚拟DOM的作用Vue中的虚拟DOM是如何实现的diff算法创建节点删除节点更新节点 如何高效操作DOM 什么是DOM DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 的接口. 浏览器真实解析DOM的流程 为什么说操作DOM耗时 线程切换 浏览器包含渲染引擎（也称浏览器内核）和 JavaS
前端人不得不谈的虚拟DOM
发果叁
10-15 630
在学习虚拟DOM的过程中，从它产生的原因出发，分析它的特点和优势以及应用场景，研究虚拟DOM对象属性，并引出虚拟DOM的原理和实践方式。最后从react和vue的内部实现引出snabbdom和preact两个第三方包，后续将先从这两个包出发，学习各自的虚拟DOM原理，为阅读react和vue的源码做准备。整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
前端开发--虚拟DOM
weixin_51059952的博客
09-05 828
是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫做.我们为什么用虚拟DOM来模拟真实的DOM呢？因为我们知道一个DOM对象中的成员是非常多。所以创建Dom对象的成本非常高。如果使用虚拟Dom来描述真实Dom,就会发现创建的成员少，成本也就低了。
什么是虚拟DOM与真实DOM，他们的区别
yzwlogo的博客
07-14 979
虚拟DOM（Virtual Document Object Model）是指用JS对象来描述DOM节点及其属性和内容的层次结构，它是对真实DOM的一种抽象表示，并不是真正的DOM节点。当页面需要更新时，虚拟DOM首先进行比较，找出需要更新的部分，然后批量更新至真实DOM，最终只会引起页面的局部重排和重绘，可以减少页面渲染的开销，提高性能。
为什么要用虚拟DOM？
lwx33912138的博客
11-15 1124
什么是虚拟DOM，虚拟DOM与DOM的区别，虚拟DOM的优势与好处
虚拟DOM与render函数
嗨皮的博客
01-31 851
vue底层的实现方法与vue在浏览器中的渲染机制
什么是虚拟DOM
weixin_53156345的博客
05-31 1105
Virtual DOM（虚拟DOM），是由普通的 JS 对象来描述DOM对象，因为不是真实的DOM对象，所以叫 Virtual DOM。
什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路
lllllrp的博客
08-09 531
虚拟 DOM （）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（和Weex实际上它只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别创建虚拟。
什么是虚拟DOM？
YUSIR 完美CODING世界
02-07 4300
这还仅仅是两层嵌套，实际开发中dom结构往往要复杂的多，因此react中我们常常推荐直接使用jsx文件定义业务逻辑以及html片段。的结构，而React.createElement。接收后生成的数据，其实才是真正意义上的虚拟。方法一定不会陌生，它用于创建。那么到这里，我们搞清楚了虚拟。其实只是一个包含了标签类型。说到底，这个就是传递给。究竟是什么，所谓虚拟。
vue 源码解析之虚拟Dom-render
10-16
虚拟DOM是Vue在内存中构建的一种数据结构，它模拟了真实的DOM树，允许Vue在更新UI时进行高效的比较和更新操作。 在Vue的源码解析中，`Vue` 构造函数是整个框架的入口点。当创建一个新的Vue实例时，会调用`Vue....
深入理解Vue2.x的虚拟DOM diff原理
08-29
在 Vue2.x 中，虚拟DOM是一个轻量级的 JavaScript 对象，它是真实DOM的抽象表示。虚拟DOM的定义是通过 VNode 对象来实现的，其中 VNode 对象包含了标签名、孩子节点、文本节点和对应的真实DOM对象等信息。 VNode 的...
vue 虚拟DOM的原理
10-14
主要介绍了vue 虚拟DOM的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
Vue使用虚拟dom进行渲染view的方法
10-15
虚拟DOM是一种在内存中对真实DOM的抽象表示，它可以高效地比较和更新DOM，减少不必要的DOM操作，从而提升用户体验。Vue利用数据绑定和虚拟DOM相结合的方式，实现了视图的自动更新。 在Vue中，当数据发生变化时，Vue...
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
虚拟dom
weixin_52972239的博客
06-14 1721
1、虚拟DOM（virtual DOM）简称vdom，是一个普通的js对象，用来描述真实dom结构，因为它不是真实的DOM，所以称为虚拟DOM 2、属性：vdom具有三个属性 （1）tag：标签名 （2）attrs：属性 （3）children：子元素对象3、虚拟DOM的设计思想 （1）提供一种方便的工具，使开发效率得到保证； （2）保证最小化的DOM操作，使得执行效率得到保证1、原因一：真实的DOM运行是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的，真实的DOM节点，哪怕一个最简单
虚拟DOM的实现原理【1-4】
qq_37833745的博客
09-24 1299
1: 什么是虚拟DOM 虚拟DOM：是由普通 JS 对象 来描述 DOM 对象 2: 为什么要虚拟DOM？ 手动操作 DOM 比较麻烦，还需要考虑浏览器兼容性问题，虽然有 JQuery 等库简化 DOM 操作 ，但是随着项目的复杂，DOM 操作复杂提升，比较前端开发刀耕火种的年代 为了简化 DOM 的复杂操作，于是出现了各种 MVVM框架，MVVM 框架解决了 视图 和 状态同步问题 为了简化视图的操作，可以使用模版引擎，但是模版引擎没有解决跟踪状态变化的问题，于是虚拟...
【Vue面试题二十二】、什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路
最新发布
做笔记\记录遇到的程序bug
10-15 312
虚拟 DOM （）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（和Weex实际上它只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别创建虚拟。
说说真实dom和虚拟dom有什么区别，虚拟dom的优势是什么？
Sink
12-08 1972
虚拟dom
Readl DOM (真实DOM) 和 Virtual DOM (虚拟DOM)之间的区别，以及优缺点
比鲁斯大人的博客
08-24 250
1、真实DOM：2、虚拟DOM。
什么是DOM?什么是虚拟DOM?
07-28
DOM（Document Object Model）是一种表示文档结构的对象模型，它将HTML或XML文档解析成一个树状结构，通过操作这个树状结构来实现对文档的增删改查。 虚拟DOM（Virtual DOM）是一个概念，它是对真实DOM的一种抽象表示。在某些Web开发框架中，使用虚拟DOM来提高性能和开发效率。虚拟DOM是一个虚拟的内存中的树状结构，它通过比较和计算与真实DOM的差异，然后批量更新真实DOM，以减少对真实DOM的操作次数，从而提高性能。 当页面需要更新时，先在内存中构建一个虚拟DOM树，然后与上一次渲染的虚拟DOM树进行比较，找出差异部分，并将这些差异部分应用到真实DOM上。这样可以避免直接操作真实DOM带来的性能损耗，并且可以批量更新DOM，提高渲染性能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值