一、是什么

Real DOM,真实DOM, 意思为文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个结点都是一个真实DOM结构,如下:

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

创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中,虚拟DOM对象的节点与真实DOM的属性一一照应

React中,JSX是其一大特性,可以让你在JS中通过使用XML的方式去直接声明界面的DOM结构

const vDom = <h1>Hello World</h1> // 创建h1标签,右边千万不能加引号
const root = document.getElementById('root') // 找到<div id="root"></div>节点
ReactDOM.render(vDom, root) // 把创建的h1标签渲染到root节点上

上述中,ReactDOM.render()用于将你创建好的虚拟DOM节点插入到某个真实节点上,并渲染到页面上

JSX实际是一种语法糖,在使用过程中会被babel进行编译转化成JS代码,上述VDOM转化为如下:

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

可以看到,JSX就是为了简化直接调用React.createElement() 方法:

  • 第一个参数是标签名,例如h1、span、table...

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

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

通过console.log(VDOM),则能够得到虚拟VDOM消息

所以可以得到,JSX通过babel的方式转化成React.createElement执行,返回值是一个对象,也就是虚拟DOM

二、区别

两者的区别如下:

  • 虚拟DOM不会进行排版与重绘操作,而真实DOM会频繁重排与重绘
  • 虚拟DOM的总损耗是“虚拟DOM增删改+真实DOM差异增删改+排版与重绘”,真实DOM的总损耗是“真实DOM完全增删改+排版与重绘”

之前文章举过的例子:

传统的原生apijQuery去操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程

当你在一次操作时,需要更新10个DOM节点,浏览器没这么智能,收到第一个更新DOM请求后,并不知道后续还有9次更新操作,因此会马上执行流程,最终执行10次流程

而通过VNode,同样更新10个DOM节点,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地的一个js对象中,最终将这个js对象一次性attachDOM树上,避免大量的无谓计算

三、优缺点

真实DOM的优势:

  • 易用

缺点:

  • 效率低,解析速度慢,内存占用量过高
  • 性能差:频繁操作真实DOM,易于导致重绘与回流

使用虚拟DOM的优势如下:

  • 简单方便:如果使用手动操作真实DOM来完成页面,繁琐又容易出错,在大规模应用下维护起来也很困难

  • 性能方面:使用Virtual DOM,能够有效避免真实DOM数频繁更新,减少多次引起重绘与回流,提高性能

  • 跨平台:React借助虚拟DOM, 带来了跨平台的能力,一套代码多端运行

缺点:

  • 在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
  • 首次渲染大量DOM时,由于多了一层虚拟DOM的计算,速度比正常稍慢

Real DOM和 Virtual DOM 的区别?优缺点?的更多相关文章

  1. 一篇文章教会你如何将DOM转换为virtual DOM

    [一.Virtual DOM简介] Virtual DOM是虚拟节点,它通过Javascript的Object对象模拟DOM中的节点,然后通过特定的render方法将其渲染成真实的DOM节点. 浏览器 ...

  2. React:关于虚拟DOM(Virtual DOM)

    Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象. React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件 ...

  3. react的Virtual DOM

    一.Virtual DOMVirtual DOM是一个JavaScript对象,v8引擎使得js可以高效运行,而直接操作DOM很慢.Virtual DOM本质上就是在JS和DOM之间做了一个缓存.可以 ...

  4. 前端笔记之React(四)生命周期&Virtual DOM和Diff算法&日历组件开发

    一.React生命周期 一个组件从出生到消亡,在各个阶段React提供给我们调用的接口,就是生命周期. 生命周期这个东西,必须有项目,才知道他们干嘛的. 1.1 Mouting阶段[装载过程] 这个阶 ...

  5. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  6. virtual dom 简单了解

    管理应用程序状态和用户界面的同步一直是前端UI开发复杂性的主要来源.目前出现了不同的方式来处理这个问题.本文简单讨论其中一种方式virtual dom. 文章概要: virtual dom 基本概念, ...

  7. Virtual DOM 和 diff 算法

    virtual DOM : virtual DOM 用 js 模拟 DOM 结构,用 js 来对比前后变化,提高重绘性能. diff: 比如在 git 中,如果用命令  git diff xxx文件 ...

  8. [翻译]Review——The Inner Workings Of Virtual DOM

    The Inner Workings Of Virtual DOM 虚拟DOM的内部工作机制 原文地址:https://medium.com/@rajaraodv/the-inner-workings ...

  9. 【转】Virtual DOM

    前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React.Virtual DOM 的文章.但是直到前不久我专门花时间去学习 ...

随机推荐

  1. OneFlow 概念清单

    OneFlow 概念清单 本文将对 OneFlow 中涉及到的,常用的一些概念/名词做一个概括性的解释.主要内容针对算法工程师和框架开发者分为以下两部分: 算法开发 框架开发 在算法开发部分,将解释深 ...

  2. X-Deep Learning功能模块

    X-Deep Learning功能模块 特征体系 样本 特征 网络 数据准备 样本格式 使用DataReader读取数据 自定义python reader 定义模型 稀疏部分 稠密部分 优化器 训练模 ...

  3. Tensor Core技术解析(下)

    Tensor Core技术解析(下) 让FP16适用于深度学习 Volta的深度学习能力是建立在利用半精度浮点(IEEE-754 FP16)而非单精度浮点(FP32)进行深度学习训练的基础之上. 该能 ...

  4. GitHub上开源的YOLOv5

    GitHub上开源的YOLOv5 代码地址:https://github.com/ultralytics/YOLOv5 该存储库代表Ultralytics对未来的对象检测方法的开源研究,并结合了我们在 ...

  5. OSPF-三张表+路由器角色+router-id

    验证理论: 1.剖析OSPF的三张表:邻居表,拓扑表,路由表 dis ospf peer brief dis ospf lsdb dis ip routing-table protocol ospf ...

  6. BurpSuite安装与sqlmap联动

    这是我新建的一台虚拟机,还没有安装java运行环境. 这是我的[burpsuite2.0](https://pan.baidu.com/s/1uGn4IE6_6Xn4cwj_Vo5BBg),现在我们去 ...

  7. 实验4、Flask基于Blueprint & Bootstrap布局的应用服务

    1. 实验内容 模块化工程内容能够更好的与项目组内成员合作,Flask Blueprint提供了重要的模块化功能,使得开发过程更加清晰便利.此外,Flask也支持Bootstrap的使用. 2. 实验 ...

  8. NX二次开发-获取面的外围边和孔槽边

    函数: UF_MODL_ask_face_loops()  获取面的所有封闭边组合(多组edge) UF_MODL_ask_loop_list_count() 获取loop的数量(面上孔.槽的数量+1 ...

  9. webpack 快速入门 系列 - 自定义 wepack 上

    其他章节请看: webpack 快速入门 系列 自定义 wepack 上 通过"初步认识webpack"和"实战一"这 2 篇文章,我们已经学习了 webpac ...

  10. ffmpeg实战-音视频基础概念

    转发自白狼栈:查看原文 关于音视频,相信大家都看过电影(视频),听过音乐(音频),至少应该都知道mp4是视频文件,mp3是音频文件. 对于一个音视频文件,都有哪些属性呢?以视频为例,我们可以通过 ff ...