为什么要用虚拟DOM

已于 2022-10-14 23:39:51 修改
阅读量437 收藏
点赞数
文章标签： 前端 javascript html
于 2022-10-13 18:58:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zd1007129657/article/details/127306634
版权

前端开发离不开界面，界面玩的就是数据和视图(DOM)，数据驱动视图(DOM）。

DOM操作频繁必然会耗费性能，但操作DOM又是避免不了的，只能尽可能减少对DOM的操作。

利于JS计算性能，在初次渲染DOM的时候，同时用JS描述一份虚拟DOM，当数据发生变化时，通过查询对比虚拟DOM的方式，一次性找出所有要修改的真实DOM节点进行修改。

如果没有虚拟DOM，举个例子，当一个数据发生变化，对应的要更新视图中10处DOM节点，传统的做法，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。而每一次的更新必然会操作DOM，并且引起回流，造成性能消耗。

虚拟DOM的意义，就是不会立即操作真实DOM，而是更新虚拟DOM，因为虚拟DOM是用JS描绘的对象，所以不会对性能造成太大损耗，更新完虚拟DOM后，再一次性渲染成真实的DOM，也就是从前到后浏览器只需要绘制一次。

快速扫描下方二维码  免费加入前端技术交流群

 

 

编程迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为什么使用虚拟DOM？
祈澈菇凉
10-24 612
使用虚拟 DOM（Virtual DOM）是为了提高前端应用的性能和开发效率，它的主要原理是在内存中构建一个轻量级的 DOM 树，通过对比虚拟 DOM 的变化，最小化真实 DOM 的操作。4：组件化开发：虚拟 DOM 与组件化开发相结合，使得开发者可以将 UI 拆分为独立的组件，提高了代码的可重用性和可维护性。3：简化开发：虚拟 DOM 提供了一种声明式的开发方式，将 UI 的状态与 UI 的渲染分离，使得代码更加清晰和可维护。虚拟 DOM 作为一种优化手段，可以在复杂的应用中提供更好的性能和开发体验。
请解释Vue为什么要用虚拟Dom ，详细解释原理
youhebuke225的博客
05-30 445
Vue使用虚拟DOM（Virtual DOM）的主要原因是为了提高性能和优化渲染过程。
为什么要用虚拟DOM？
lwx33912138的博客
11-15 1137
什么是虚拟DOM，虚拟DOM与DOM的区别，虚拟DOM的优势与好处
Vue为什么要用虚拟DOM，详细解释原理
最新发布
My_wife_QBL的博客
07-04 325
虚拟DOM是一个轻量级的JavaScript对象，它是对真实DOM的抽象表示。它由一系列的VNode（虚拟节点）组成，每个VNode代表一个DOM节点。虚拟DOM并不是直接操作浏览器中的DOM，而是在内存中进行操作，然后通过一定的算法将变化同步到真实的DOM中。Vue使用虚拟DOM的主要目的是为了优化性能、提供跨平台能力和简化开发。虚拟DOM通过在内存中操作虚拟DOM树，减少对真实DOM的直接操作，从而提高性能。虚拟DOM的工作原理包括虚拟DOM的创建、比较和更新。
为什么要用虚拟 DOM?
哼哼哼哼哼
04-26 1759
虚拟DOM（Virtual DOM）是一种将应用程序的状态（state）与DOM分离的技术。它是一个JavaScript对象，它的结构类似于实际DOM元素的结构。使用虚拟DOM的目的是在减少DOM操作的数量的同时，提高应用程序的性能和响应速度。当应用程序的状态发生变化时，使用虚拟DOM可以计算出需要进行哪些DOM操作来更新UI界面，这样只需要更新必要的部分，而不是整个DOM树。这样可以减少浏览器重新渲染的次数，从而提高性能。
为什么要使用虚拟DOM？
economics3的博客
04-01 773
为什么要使用虚拟DOM 主要分为两个角度 1.DOM操作角度。假设状态发生变化，我们如何将状态的更新应用到视图上？ 直接创建元素，然后将元素覆盖到我们需要更新的地方，这样做固然很快捷，但是会引发页面出现很大的变动，渲染引擎需要重新计算和渲染，这样的开销很大 更聪明的办法是找出那些需要更新的节点，然后只更新那些发生变动的节点，这样导致DOM操作减少，虽然会耗费一点时间用于计算哪些节点需要更新，但是这样的时空置换是远远值得的 2.vue数据侦测角度，由于Vue1.0绑定状态是页面的中dom节点，如果绑定的节点过
为什么要使用虚拟DOM
zhuoyunpeng的博客
10-15 1749
在直接操作DOM时浏览器会执行该操作。所以在频繁操作DOM元素时会不断重复执行，大大影响性能，而操作虚拟DOM可以操作多次然后与真实DOM进行比较，把修改的节点进行attch，这样节省执行操作次数。提高性能。 ...
React-为什么要使用虚拟DOM
柒青衿的博客
07-01 6179
什么是虚拟DOM（Virtual DOM）首先，解释下虚拟DOM。虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应。虚拟DOM的工作原理是：数据 -> 全新的虚拟DOM -> 与上一个状态的虚拟DOM进行diff算法比较，得到一个Patch -> 把这个Patch打到浏览器的DOM上。所以虚拟DOM叫的挺高端，其实就有点类似DocumentFragment，把多次DOM操作做
vue为什么要用虚拟dom
05-19
Vue使用虚拟DOM的主要目的是为了提高性能和优化渲染速度。虚拟DOM是一个轻量级的JavaScript对象，它是真实DOM的一个映像。当Vue的数据发生变化时，Vue会先将这些变化应用到虚拟DOM上，然后再将虚拟DOM与之前的虚拟...
为什么要用虚拟Dom？
qq_43913976的博客
03-23 1140
Vue中的虚拟Dom（virtual Dom） 为什么要用虚拟Dom？ JS操作真实DOM的代价！ ​ 用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点...
为什么需要虚拟DOM？
夕山雨的博客
08-30 4547
目录1. 真实DOM操作的性能问题2. 虚拟DOM的作用总结 我们知道，虚拟DOM的概念是由Facebook的React团队最早提出来的，也是React框架的核心概念之一。它的作用是以js的形式在内存中描述真实的DOM结构，这样当页面内容需要发生变动时，React可以通过对前后虚拟DOM的比对，计算出如何以最小的代价操作真实DOM。 1. 真实DOM操作的性能问题 在虚拟DOM出现之前，前端开发者最常用的方式是用jQuery直接操作真实DOM，像下面这样： <body> <div id
在开发中为什么我们需要使用DOM虚拟节点？
qq_52409560的博客
12-29 288
和不能确定到页面被修改的某一个点，那就不能全量生成真实的DOM节点，而是全量生成虚拟DOM节点,然后找到它改动的节点，再去改动它对应的真实DOM，才引入了虚拟DOM节点，这是是一个不得已而为之的挽救措施，因为实际上我们很难做到数据和界面的一一对应，才不得已引入虚拟DOM。（user interface--用户界面），而用户界面不一定是网页，可能是移动端，或者桌面应用程序，不同的平台之间差异就会很大，我们平时说的DOM是页面应用，页面才有DOM，小程序，移动端APP则么样，所以。为了消除平台之间的差异。
虚拟DOM的意义
shiningchen322的博客
05-25 349
虚拟DOM的意义： 操作真实DOM代码很冗余，难以维护，而且每次都频繁操作DOM很耗性能，会出现页面卡死的情况， 使用虚拟DOM能减少对真实DOM的操作，大大提高渲染效率，优化前端性能的必要手段。 虚拟DOM是javascript模拟DOM结构的树形结构，也可以理解成是一个对象，把真实DOM转换为js代码，里面有tag、children、attributes字段等等 虚拟DOM中进行频繁修改，最后一次性根据diff算法比对真实DOM和虚拟DOM的差异，最后再渲染差异部分，减少真实DOM节点的回.
Vue中的虚拟dom
田兴的博客
08-10 7309
我又来了，这是Vue面试的最后一招，当然也是极其简单了，先说Virtual Dom，来一句概念： 用js来模拟DOM中的节点。传说中的虚拟DOM。 再来一张图： 　　 是不是一下子秒懂 没懂再来一张 　Virtual Dom就先这样，理解了就OK，下面我们了解一下Diff，老规矩先来一句概念： diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。 换句人话 diff的过程就是调用名为patch的函数，比较新旧节点
为什么需要 Virtual Dom
路人贾！
07-13 520
为什么需要 Virtual Dom
【面试题】为什么需要虚拟DOM？
qq_48018255的博客
03-28 405
Vue 和 React 框架都是基于数据驱动的，以数据为中心，数据发生改变，对应的界面也要随之改变。由于框架去判断具体是哪些数据发生改变是比较困难的，因此Vue 和 React内部render函数的设计了中，当数据发生变化 ，render函数会全量生成元素。虚拟DOM的设计使得它可以独立于平台实现，这样就可以在不同的平台上使用相同的代码逻辑来构建应用程序，例如在Web端、移动端和桌面端等。虚拟DOM的出现可以通过在内存中操作虚拟DOM对象来减少实际DOM操作的次数，从而减少了重排和重绘的次数，提高了性能。
现代前端为什么要使用虚拟DOM
Asion的博客
06-05 954
一、虚拟DOM与DOM的区别 仅仅修改虚拟DOM中内容，不会带来页面的排版与重绘操作。在完成虚拟DOM修改后，进行真实DOM的修改，才会使页面重绘。 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗 真实的DOM中，过多的内容修改，会带来多次的页面重绘，极大的损耗页面的性能。而在使用虚拟DOM时，不管一次修改了多少内容，最后只会发生一次页面的重绘，大大的提高了页面的性能。 二、虚拟DOM的优势 Vi...
为什么需要虚拟DOM，它有什么好处？
weixin_45744454的博客
07-13 3061
为什么需要虚拟DOM，它有什么好处？ web界面由DOM树来构建，当其中一部分发生变化时，其实就是对应某个节点发生了变化。 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。若一次操作DOM中有十次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这十次更新的diff内容保存到本地一个js中，最终将这个js对象一次性attach 到DOM树上，在进行后续操作。避免大量无谓的计算量。所以，用js对象模拟DOM节点的好处是，页面的更新可以先全部反应在js对象（虚拟DOM）上，操作内存中的js对象的速度显然
虚拟DOM的基本含义
ukyhuang_xinyi的博客
09-27 268
基本意思：用 JavaScript 对象表示 DOM 信息和结构，当状态变更的时候，重新渲染这个 JavaScript 的对象结构。 我们需要对页面真正的 DOM 操作，然后把它们应用在真正的 DOM 树上，页面就变更了。这样就可以做到：视图的结构确实是整个全新渲染了，但是最后操作DOM的时候确实只变更有不同的地方。 这就是所谓的 Virtual DOM 算法。包括几个步骤： 用 JavaS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值