简单理解DOM和虚拟DOM的区别

最新推荐文章于 2024-05-15 10:36:31 发布
最新推荐文章于 2024-05-15 10:36:31 发布
阅读量472 收藏
点赞数
分类专栏： vue 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39595839/article/details/121025820
版权

DOM 节点 传统开发模式 虚拟DOM 性能优化
关键词由CSDN通过智能技术生成

DOM

DOM （文档对象模型），它的作用是将网页转化为一个对象，进而可以对其进行各种操作

节点（node）

节点是 DOM 的基本单位。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作文档树的一片叶子

传统开发模式

原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程，
在操作中，我需要每更新一次DOM节点，浏览器就会全部重新执行一次渲染

虚拟DOM

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，虚拟 DOM 就是一个普通的JavaScript 对象
虚拟 DOM 每次更新都尽量避免刷新整个页面，而是有针对性的去刷新那被更改的部分。从而提高效率，节约资源

醉月听风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM与虚拟DOM
zhouyl02的博客
09-21 1876
1. DOM（Document Object Model） 2018年通用版本是 DOM 3 DOM的作用：对Html文档进行增删改查 DOM文档树： （Object =>） 祖先 Node => Document创建Html标签；Text 创建文本；Element 创建其他元素标签；Comment 创建注释… 2. Node 接口 2. 1 属性 childNodes //获取的...
深入理解Vue2.x的虚拟DOM diff原理
08-29
深入理解Vue2.x的虚拟DOM diff原理 Vue2.x的虚拟DOM diff原理是指 Vue2.x 中的一种高效的渲染机制，它通过对比虚拟DOM和真实DOM之间的差异来实现快速渲染。下面我们将深入了解 Vue2.x 的虚拟DOM diff原理。 虚拟...
虚拟DOM和实际的DOM有何不同？
前端全栈开发者
10-27 3103
在本文我们会先聊聊 DOM 的一些缺陷，然后在此基础上介绍虚拟 DOM 是如何解决这些缺陷的，最后再站在双缓存和 MVC 的视角来聊聊虚拟 DOM。理解了这些会让你对目前的前端框架有一个更加底层的认识，这也有助于你更好地理解这些前端框架。 1. DOM 的缺陷 JavaScript 操纵 DOM 是会影响到整个渲染流水线的，另外，DOM 还提供了一组 JavaScript 接口...
虚拟DOM和真实的DOM区别
最新发布
weixin_63681863的博客
05-15 468
在双方都足够复杂的情况下，虚拟DOM的耗时操作是远超真实DOM的（注意前提是初始渲染当DOM更新时，虚拟dom可以帮助我们去进行计算，从而减少DOM的更新频率和更新数量，所以可以提升性能。
虚拟DOM和真实DOM的区别
qq_34639706的博客
08-05 281
虚拟DOM与真实DOM的区别（注意：需不需要虚拟DOM，其实与框架的DOM操作机制有关）： 虚拟DOM不会进行排版与重绘操作 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗 真实DOM频繁排版与重绘的效率是相当低的 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实...
vue 源码解析之虚拟Dom-render
10-16
Vue.js 是一个流行的前端JavaScript框架，它的核心特性之一就是使用虚拟DOM来提高性能和效率。虚拟DOM是Vue在内存中构建的一种数据结构，它模拟了真实的DOM树，允许Vue在更新UI时进行高效的比较和更新操作。 在Vue...
vue 虚拟DOM的原理
10-14
主要介绍了vue 虚拟DOM的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
虚拟DOM的实现
05-20
在提供的"test"文件中，可能包含了这样的实现代码，通过分析和运行这些代码，可以加深对虚拟DOM理解。 总的来说，虚拟DOM通过提供一种高效的方式来处理DOM更新，极大地提升了Web应用的性能和用户体验。它是现代前端...
虚拟DOM和真实DOM的区别和联系
xiaomao_wxj的博客
11-01 2752
虚拟DOM和真实DOM区别和联系
真实dom与虚拟dom的区别
weixin_59341573的博客
08-25 855
真实dom与虚拟dom区别
1.react入门
qq_24871849的博客
12-17 106
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <!-- react核心库 --> <script type="text/javascript" src="package/react.development.js"></script> <
什么是虚拟DOM与真实DOM，他们的区别
yzwlogo的博客
07-14 1053
虚拟DOM（Virtual Document Object Model）是指用JS对象来描述DOM节点及其属性和内容的层次结构，它是对真实DOM的一种抽象表示，并不是真正的DOM节点。当页面需要更新时，虚拟DOM首先进行比较，找出需要更新的部分，然后批量更新至真实DOM，最终只会引起页面的局部重排和重绘，可以减少页面渲染的开销，提高性能。
浏览器工作原理与实践--虚拟DOM：虚拟DOM和实际的DOM有何不同
echohuangshihuxue的博客
04-09 771
在谈论什么是虚拟DOM之前，我们先来看看虚拟DOM到底要解决哪些事情。将页面改变的内容应用到虚拟DOM上，而不是直接应用到DOM上。变化被应用到虚拟DOM上时，虚拟DOM并不急着去渲染页面，而仅仅是调整虚拟DOM的内部状态，这样操作虚拟DOM的代价就变得非常轻了。在虚拟DOM收集到足够的改变时，再把这些变化一次性应用到真实的DOM上。基于以上三点，我们再来看看什么是虚拟DOM。为了直观理解，你可以参考下图：虚拟DOM执行流程。
【面试题】1003- 面试官：说说 Real DOM与 Virtual DOM 的区别？
pingan8787
06-29 410
一、是什么Real DOM，真实DOM， 意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构，如下：Virtual Dom，本质上是以 JavaSc...
vue 虚拟 DOM理解
08-20
Vue 的虚拟 DOM 是一种在内存中以...总的来说，Vue 的虚拟 DOM 技术能够提高性能，并且使开发更加方便和灵活。通过对比新旧虚拟 DOM 的差异，只更新需要更新的部分，减少了实际 DOM 操作的开销，提高了页面渲染的效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值