说说Real DOM和Virtual DOM的区别?优缺点?

简介: 在页面渲染出的每个节点都是一个真实的DOM结构

Real DOM(真实的DOM)

在页面渲染出的每个节点都是一个真实的DOM结构

<div class="root">
  <h1>hello Real </h1>
</div>

这个就是真实的dom

真实dom的优缺点?

优点:

1. 直接操作HTML,易用

缺点:

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

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

Virtual DOM(虚拟的DOM)

虚拟dom的优缺点?

<h1 className="hClass">hello world</h1>

这是虚拟dom的写法

JSX实际是一种语法糖,在使用过程中会被babel进行编译,转化成JS代码,上面的虚拟DOM转换如下:

const vDom = React.createElement('h1',{
    {className:'hClass'},
     'hello world'
)

他一共有三个参数


第一个参数是 标签名,例如h1、div等;

第二个参数是对象,里面存放着标签的一些属性,如class、id等;

第三个参数是节点中的文本


优点:

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

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

缺点:

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


两者的区别

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

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

相关文章
|
6月前
|
JavaScript 前端开发 API
DOM驱动和数据驱动的区别
DOM驱动和数据驱动的区别
66 0
|
6月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
88 0
|
1月前
|
JavaScript 前端开发 算法
真实DOM和虚拟DOM有哪些区别?
本文介绍了真实DOM和虚拟DOM的概念、使用方式、优势、劣势、使用场景、影响因素、开发效率和性能对比。真实DOM是浏览器提供的原生接口,直接操作简单直观,但频繁操作会导致性能损耗。虚拟DOM是真实DOM的抽象表示,通过比较差异减少DOM操作,适用于大规模数据变更和复杂交互的页面。开发者应根据具体需求选择合适的DOM操作方式,以提高页面性能和开发效率。
70 1
真实DOM和虚拟DOM有哪些区别?
|
3月前
|
XML JavaScript API
DOM 和 SAX 解析器之间的区别
【8月更文挑战第22天】
43 0
|
3月前
|
XML JavaScript Java
Java 中 DOM 和 SAX 解析器之间的区别
【8月更文挑战第22天】
25 0
|
5月前
|
JavaScript 前端开发 API
|
6月前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
45 0
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
26天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
26天前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。