一、是什么

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. Auto ML自动调参

    Auto ML自动调参 本文介绍Auto ML自动调参的算法介绍及操作流程. 操作步骤 登录PAI控制台. 单击左侧导航栏的实验并选择某个实验. 本文以雾霾天气预测实验为例. 在实验画布区,单击左上角 ...

  2. deeplearning模型量化实战

    deeplearning模型量化实战 MegEngine 提供从训练到部署完整的量化支持,包括量化感知训练以及训练后量化,凭借"训练推理一体"的特性,MegEngine更能保证量化 ...

  3. 短波红外(SWIR)相机camera

    短波红外(SWIR)相机camera AVs Can't Drive Everywhere. Can TriEye's SWIR Camera Help? TriEye的短波红外(SWIR)摄像机能否 ...

  4. 使用multus实现管理网和业务网分离——calico和flannel共存

    多个网络层面的需求 一开始为k8s集群搭建了calico网络,所有的容器都用calico对应的网卡进行通信.为了实现网络监控的清爽,想把管理组件,例如日志.统计.监控等组件挪到另外一个网络.于是产生一 ...

  5. python小知识,列表推导式

    使用列表推导式可以快速生成一个列表,或者根据某个列表生成满足指定需求的列表. 1.生成指定范围的数值列表,语法格式如下: list=[Expression for var in range if co ...

  6. Jenkins 安装使用笔记

    系统要求 最低推荐配置: 256MB可用内存 1GB可用磁盘空间(作为一个容器docker运行jenkins的话推荐10GB) 为小团队推荐的硬件配置: 1GB+可用内存 50 GB+ 可用磁盘空间 ...

  7. InfluxDB总结

    一.简介 InfluxDB(时序数据库)influxdb是一个开源分布式时序.时间和指标数据库,使用 Go 语言编写,无需外部依赖.其设计目标是实现分布式和水平伸缩扩展,是 InfluxData 的核 ...

  8. 【逆向&渗透实战】Dump内存中的Dex_我是如何脱壳某公司加固过的Apk并利用其API渗透对方数据库

    /作者:Kali_MG1937 QQ:3496925334 CNBLOG博客号:ALDYS4/ 某天午睡,朦朦胧胧梦到给学校提供建站模板的公司有个注射点 梦醒后,我凭借着零散的记忆日进了对面的数据库, ...

  9. LVM与磁盘配额

    LVM与磁盘配额 目录 一.LVM概述 1.1.LVM 概述 1.2.LVM机制的基本概念 二.LVM 管理命令 2.1.主要命令 2.2.LVM命令详解 三.设置磁盘配额 3.1.磁盘配额的概述 3 ...

  10. Python基础之:Python的数据结构

    目录 简介 列表 列表作为栈使用 列表作为队列使用 列表推导式 del 元组 集合 字典 循环 简介 不管是做科学计算还是编写应用程序,都需要使用到一些基本的数据结构,比如列表,元组,字典等. 本文将 ...