虚拟DOM，和实际的DOM有何不同？

最新推荐文章于 2023-04-23 17:45:59 发布
最新推荐文章于 2023-04-23 17:45:59 发布
阅读量249 收藏
点赞数
分类专栏： 浏览器工作原理与实践 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gary_888/article/details/125861797
版权

什么是虚拟DOM

虚拟DOM解决的事情：

  1. 将页面改变的内容应用到虚拟DOM上，而不是直接应用到DOM上。
  2. 变化被应用到虚拟DOM上时，虚拟DOM并不急着去渲染页面，而仅仅是调整虚拟DOM的内部状态，这样操作虚拟DOM的代价就变得非常轻了。
  3. 在虚拟DOM收集到足够的改变时，再把这些变化一次性应用到真实的DOM上。
    虚拟DOM执行流程
    比较两个虚拟DOM的过程是在一个递归函数里执行的，其核心算法是reconciliation。

总结：

  1. 虚拟DOM解决了频繁更新dom引起的性能问题；
  2. 将真实DOM和js操作解耦，减少js操作dom复杂性。
干到60岁退休的码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中对虚拟dom的理解
efew212efe的博客
04-11 2987
什么是虚拟dom 文档对象模型中定义了一个接口，该接口允许JavaScript之类的语言访问和操作HTML文档。元素由树中的节点表示，并且接口允许我们操作它们，但是此接口需要付出代价，大量非常频繁的dom操作会使页面速度变慢 Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。 简单来说，可以把Virtual DOM 理解为一个简单的JS对象
DOM与虚拟DOM
zhouyl02的博客
09-21 1883
1. DOM（Document Object Model） 2018年通用版本是 DOM 3 DOM的作用：对Html文档进行增删改查 DOM文档树： （Object =>） 祖先 Node => Document创建Html标签；Text 创建文本；Element 创建其他元素标签；Comment 创建注释… 2. Node 接口 2. 1 属性 childNodes //获取的...
virtual Dom 全面理解虚拟Dom
qq_34185872的博客
04-23 858
当数据发生变化时，Virtual DOM 会重新渲染整个视图，并与旧的 Virtual DOM 进行比较以找出真正需要更新的部分，从而最小化了 DOM 操作的数量和浏览器的重绘次数，提高了应用程序的性能和响应速度。因此，对于这些框架的开发者和使用者来说，了解 Virtual DOM 是至关重要的。支持跨平台开发：由于 Virtual DOM 是一个独立于浏览器的抽象层，因此 Vue 可以通过不同的渲染引擎（如浏览器、Node.js、Weex 等）来渲染组件，支持跨多个平台的开发。
虚拟DOM和真实DOM的区别
hmxs_hmbb的博客
07-14 8580
虚拟DOM和真实DOM的区别
为什么需要虚拟DOM，它有什么好处？
weixin_45744454的博客
07-13 3056
为什么需要虚拟DOM，它有什么好处？ web界面由DOM树来构建，当其中一部分发生变化时，其实就是对应某个节点发生了变化。 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。若一次操作DOM中有十次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这十次更新的diff内容保存到本地一个js中，最终将这个js对象一次性attach 到DOM树上，在进行后续操作。避免大量无谓的计算量。所以，用js对象模拟DOM节点的好处是，页面的更新可以先全部反应在js对象（虚拟DOM）上，操作内存中的js对象的速度显然
虚拟Dom的基本理解
Mark Sheng的博客
12-04 3536
1、概念： 虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。 相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM 2、虚拟dom原理流程 模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM vuejs通过编译将模板（template）转成渲染函数（render），执行渲染函数可以得
真实DOM和虚拟DOM
qq_40619263的博客
07-30 2086
文章目录如何高效操作DOM什么是DOM浏览器真实解析DOM的流程为什么说操作DOM耗时如何高效操作DOM虚拟DOM什么是虚拟DOM为什么要有虚拟DOM虚拟DOM的作用Vue中的虚拟DOM是如何实现的diff算法创建节点删除节点更新节点 如何高效操作DOM 什么是DOM DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 的接口. 浏览器真实解析DOM的流程 为什么说操作DOM耗时 线程切换 浏览器包含渲染引擎（也称浏览器内核）和 JavaS
26-虚拟DOM：虚拟DOM和实际的DOM有何不同？_For_vip_user_0011
08-04
在虚拟DOM 更新流程中，我们可以看到，React 会生成一个新的虚拟DOM，然后拿新的虚拟DOM 和之前的虚拟DOM 进行比较，这个过程会找出变化的节点，然后再将变化的节点应用到 DOM 上。在这个过程中，我们可以看到，虚拟...
vue 虚拟DOM的原理
10-14
虚拟DOM的出现主要是为了解决直接操作真实DOM带来的性能问题和简化开发者对DOM操作的复杂度。 在前端开发中，界面是由HTML元素构成的，这些元素组成了DOM树（文档对象模型树）。传统做法是直接操作DOM来响应数据的...
浅谈React的最大亮点之虚拟DOM
08-27
那么，虚拟DOM与直接操作原生DOM有什么不同呢？如果直接操作原生DOM，每次数据变化时，通常会涉及整个DOM树的重建，这不仅消耗性能，还会导致页面的闪烁现象。而使用虚拟DOM，React能够批量处理DOM更新操作，并且只...
详解操作虚拟dom模拟react视图渲染
10-18
具体过程包括创建虚拟DOM树，通过虚拟DOM生成真实DOM，当状态改变时生成新的虚拟DOM树，通过差异比较算法（diff）找出两者的不同，最后应用这些差异到真实DOM上（patch），从而完成更新。 示例代码展示了如何使用...
22.什么是虚拟DOM？如何实现一个虚拟DOM？
kleinBlue.的博客
10-25 564
一、什么是虚拟DOM 虚拟 DOM （Virtual DOM）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（React-Native和Weex） 实际上它只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上 在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (att...
React的虚拟Dom解决了什么问题
莫问前程F1的博客
08-19 677
为什么需要虚拟DOM 传统网页在进行更新的时候会有一个很棘手的问题，那就是需要用繁杂的DOMApi去操作 DOM，很容易出现bug且难以维护，对于如何从这种繁杂的dom操作中脱离出来，react提出了一个新的思想，-始终整体刷新页面，当数据发生变化时，react会自动更新UI, 从而让我们只关心数据以及最后UI是什么样子。 这种方式虽然简单，但是有一个很明显的问题，慢。每次数据改变就重新渲染整个页面会做大量的“无用功”，而且无法保存节点状态，比如失去焦点，为了解决这个问题，react又提出了一个解决方案
虚拟DOM的实现原理与优缺点
zyq51的博客
09-22 1万+
前言： 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。 一、什么是虚拟DOM 虚拟D
虚拟DOM为何出现以及性能问题
Meskjei的博客
07-24 2618
传统的前端编程方式是命令式编程，即直接操纵DOM，告诉浏览器该怎么干。这样的问题就是，大量的代码被用于操作DOM元素，且代码可读性差，可维护性低。 而React、Vue这些数据驱动的前端框架的出现，将命令式编程变为了函数式编程，从而大幅提升代码的可读性、可维护性。 这些框架纵然摒弃了直接操作DOM，我们只要关心数据的变动，DOM的操作由框架完成。但是这样做带来了一些性能问题。 在最原始的情况下，框...
虚拟DOM 和真实DOM的区别
weixin_45677987的博客
04-20 4760
1： 虚拟 dom： 虚拟DOM 和真实DOM 的区别: 虚拟dom 是将真实数据抽取出来， 以对象的形式模拟树形结构， 比如：dom 是这样的。 真实dom <div> <p>123</p> </div> 对应的虚拟dom： (伪代码) var Vnode = { tag: "div", children: { {tag: 'p', text: '123'} } } dom 是很慢的。 如果我们把一个简单的di...
虚拟dom的实现原理与优缺点
weixin_60908162的博客
10-26 5087
前言： 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。 一、什么是虚拟DOM 虚拟DO
虚拟dom (virtual dom)(vnode)
热门推荐
yiyueqinghui的博客
04-12 2万+
1,虚拟DOM的逻辑（React虚拟dom到真实dom发生了什么） 2，React16 更新了什么 React16中引入了Fiber这个概念，从根本上解决了由于js的单线程运行，遇到计算量较大的情况，导致动画和交互卡顿的问题。 Fiber的核心是实现了一个基于优先级和requestIdleCallback的循环任务调度算法 。它可以把一个任务拆分成多个小任务，并且可随时中止或恢复任务，同时也可以...
虚拟 DOM 是什么? 有什么优缺点?
m0_68309348的博客
04-25 3298
什么是虚拟dom? 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 所以在vue中将真实的DOM节点抽离成⼀个虚拟 的DOM树,这个虚拟的DOM树就是虚拟DOM. 优点: 保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产⽣的操作，它的⼀些 DOM 操作的实现必须是普适的，所以它 的性能并不是最优的；但是⽐起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM ⾄少可以保证在你不需要⼿动优化的 情况下，依然可以提供还不错的性能，即保证性能的下限.
Vue与React的虚拟DOM有什么不同？
最新发布
09-15
尽管Vue和React都使用了虚拟DOM，但它们在实际的实现上有一些不同之处： 1. 更新策略：Vue使用了双向绑定的机制，当数据发生变化时，它会自动更新相关的DOM节点。而React采用了单向数据流的原则，即数据的变化只能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值