【DOM】Real DOM与Virtual DOM

简介: 【DOM】Real DOM与Virtual DOM

真实 DOM

DOM是文档对象模型,

DOM采用树形结构作为分层结构,以树节点形式表示页面中各种元素或内容在页面渲染出的每一个结点都是一个真实DOM结构

虚拟DOM

虚拟Dom,本质上是以 JavaScript 对象形式存在的对 DOM 的描述


Real DOM 和 Virtual DOM区别

1.虚拟dom不会进行重绘和回流,而真实dom会频繁重排与重绘

2.虚拟dom的总损耗是”虚拟dom的增删改+真实dom的差异增删改+重排“;真实dom的消耗是”真实dom全部增删改+重排“

Real DOM 和 Virtual DOM优缺点

1.真实dom

优点:直接操作HTML,易用

缺点:

1. 解析速度慢,效率低,内存占用量高

2. 性能差:频繁操作真实DOM,导致重绘、回流

2.虚拟dom

优点:

1. 减少真实dom的频繁更新,减少重绘回流、占用内存少

2. 跨平台:一套react代码可以多端运行

缺点:页面首次渲染时,由于多一层虚拟dom的计算,速度比正常慢些

创建虚拟DOM目的

为了更好将虚拟的节点渲染到页面视图中,虚拟DOM对象的节点与真实DOM的属性一一对应,为了简化视图的操作,解决跟踪状态变化的问题

虚拟DOM的好处

当状态改变时不需要立即更新 DOM,只需要创建一个虚拟树来描述DOM,虚DOM 内部将弄清楚如何有效的更新 DOM,虚拟DOM 可以维护程序的状态,跟踪上一次的状态通过比较前后两次状态的差异更新真实 DOM

相关文章
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
191 0
|
XML JavaScript 前端开发
React中 Real DOM 和 Virtual DOM 的区别?优缺点?
React中 Real DOM 和 Virtual DOM 的区别?优缺点?
184 0
|
JavaScript 前端开发 算法
React中的Virtual DOM(看这一篇就够了)
React中的Virtual DOM(看这一篇就够了)
1691 0
|
JavaScript 前端开发 算法
Virtual DOM
Virtual DOM
67 0
|
JavaScript 前端开发
说说Real DOM和Virtual DOM的区别?优缺点?
在页面渲染出的每个节点都是一个真实的DOM结构
244 0
|
JavaScript 前端开发
Real DOM 和 Virtual DOM比较
Real DOM 和 Virtual DOM比较
182 0
|
XML JavaScript 前端开发
深入理解Virtual DOM的工作原理
虚拟DOM(Virtual DOM)是前端开发中的一个重要概念,它是用于提高页面渲染性能和优化开发体验的技术。理解虚拟DOM的工作原理对于前端开发者来说至关重要。在深入理解虚拟DOM的工作原理之前,让我们先了解一下DOM和Virtual DOM的基本概念。
271 0
|
XML 移动开发 JavaScript
Virtual Dom & JSX
Virtual Dom & JSX
145 0
|
JavaScript 算法 前端开发
Virtual DOM到底有什么迷人之处?如何搭建一款迷你版Virtual DOM库?
Virtual DOM到底有什么迷人之处?如何搭建一款迷你版Virtual DOM库?
Virtual DOM到底有什么迷人之处?如何搭建一款迷你版Virtual DOM库?
|
12月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。