当前位置: 首页 > news >正文

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

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

  • Real DOM(真实的DOM)
    • 真实dom的优缺点?
  • Virtual DOM(虚拟的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全部增删改+重排“

相关文章:

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

说说Real DOM和Virtual DOM的区别&#xff1f;优缺点&#xff1f;Real DOM(真实的DOM)真实dom的优缺点&#xff1f;Virtual DOM(虚拟的DOM)虚拟dom的优缺点&#xff1f;两者的区别Real DOM(真实的DOM) 在页面渲染出的每个节点都是一个真实的DOM结构 <div class"root&…...

使用脚本以可读的 JSON 格式显示 curl 命令输出

在我们经常调试微服务或者使用 Elasticsearch API 时&#xff0c;经常会使用curl 来进行调试。但是有时我们的输出不尽如意。显示的不是一 pretty 格式进行输出的。我们有时还必须借助于其他的一些网站工具&#xff0c;比如 Best JSON Formatter and JSON Validator: Online JS…...

计算机网络9:HTTP和HTTPS的区别

1.HTTP和HTTPS的区别 &#xff08;1&#xff09;安全性 HTTP是超文本传输协议&#xff0c;信息传输存在安全问题HTTPS是安全套接字超文本传输协议&#xff0c;在TCP和HTTP之间加入了SSL/TLS安全协议&#xff0c;进行加密传输 &#xff08;2&#xff09;连接步骤HTTP建立相对简…...

Spring+SpringMVC+SpringBoot+MyBatis面试题

什么是Spring框架&#xff1f;使用Spring框架的好处是什么&#xff1f;Spring是一款开源的轻量级Java开发框架&#xff0c;可以提高开发人员的开发效率以及系统的可维护性。Spring框架是很多模块的集合&#xff0c;使用这些模块可以很方便地协助我们进行开发&#xff0c;比如说…...

ContextCapture Master 倾斜摄影测量实景三维建模技术

ContextCapture实景建模大师是一套无需人工干预&#xff0c;通过影像自动生成高分辨率的三维模型的软件解决方案。它集合了全球最先进数字影像处理、计算机虚拟现实以及计算机几何图形算法&#xff0c;在易用性、数据兼容性、运算性能、友好的人机交互及自由的硬件配置兼容性等…...

MySQL事务

文章目录MySQL事务事务的四个特性 ACID事务提交的类型事务的使用MySQL事务 事务是什么&#xff1f; 事务就是一组逻辑操作单元&#xff0c;是数据从一种状态变成另外一种状态。整个单元有一个或多个SQL语句构成&#xff0c;在这个操作单元中&#xff0c;每一个SQL语句相互依赖…...

CData Drivers for Acumatica

CData Drivers for Acumatica Acumatica的CData驱动程序为用户提供了使用AcumaticaERP数据的便捷途径&#xff0c;该数据来自商业智能、分析、定制应用程序、报告以及ETL。通过JDBC、ADO.NET和ODBC等标准驱动程序&#xff0c;以及与PowerShell、Power BI、Excel、SSIS等流行应用…...

智慧税务+数据可视化:企业财务管理告别难题

一、引言在发展社会主义市场经济的过程中&#xff0c;税收承担着组织财政收入、调控经济、调节社会分配的职能。中国每年财政收入的90%以上来自税收&#xff0c;其地位和作用越来越重要&#xff0c;可称之为国家经济的“晴雨表”&#xff0c;有效进行税务管理、充分挖掘税务大数…...

Ansible中常用的模块

目录 一、Ansible Ad-Hoc命令集 1 Ad-hoc 使用场景 2 Ansible的并发特性 3 Ansible-doc用法 4 ansible命令运行方式及常用参数 5 ansible的基本颜色代表 6 ansible中的常用模块 command模块 shell模块 script模块 copy模块 fetch模块 unarchive模块 archive模块…...

问:你是如何进行react状态管理方案选择的?

前言&#xff1a;最近接触到一种新的&#xff08;对我个人而言&#xff09;状态管理方式&#xff0c;它没有采用现有的开源库&#xff0c;如redux、mobx等&#xff0c;也没有使用传统的useContext&#xff0c;而是用useState useEffect写了一个发布订阅者模式进行状态管理&…...

【华为OD机试真题 java、python、jsNode】任务总执行时长【2022 Q4 100分】

代码请进行一定修改后使用,本代码保证100%通过率,本题提供了 java、python、JsNode三种代码 题目描述 任务编排服务负责对任务进行组合调度。参与编排的任务有两种类型,其中一种执行时长为taskA,另一种执行时长为taskB。任务一旦开始执行不能被打断,且任务可连续执行。服…...

react基础

react组件传参 父传子 父组件 < ChildA value{this.state.num}></ChildA> 子组件 {props.value}接收父组件传入参数 ChildA.defaultProps{vaue:1} defaultProps默认参数 子传父 props回调函数形式 父 setNum>v>this.setState({num:v}) v形参 < ChildA…...

【Spark分布式内存计算框架——Spark SQL】2. SparkSQL 概述(上)

第二章 SparkSQL 概述 Spark SQL允许开发人员直接处理RDD&#xff0c;同时可以查询在Hive上存储的外部数据。Spark SQL的一个重要特点就是能够统一处理关系表和RDD&#xff0c;使得开发人员可以轻松的使用SQL命令进行外部查询&#xff0c;同时进行更加复杂的数据分析。 2.1 前…...

Kubeadm搭建K8S

目录 一、部署步骤 1、实验环境 2、环境准备 3、所有节点安装Docker 4、 所有节点配置K8S源 5、所有节点安装kubeadm&#xff0c;kubelet和kubectl 6、部署 kubernetes Master 节点 7、token制作 8、k8s-node节点加入master节点 9、 master节点安装部署pod网络插件&a…...

【技术分享】搭建java项目引入外部依赖教程

文章目录引言如何在linux中编译运行java程序IDEA中新建一个简单的java工程项目并运行IDEA中如何引入外部依赖并运行maven引入log4j jar包手工引入log4j jar包如何使用命令行的方式添加外部依赖如何新建一个spring源码项目并为其添加依赖给定一个spring工程源码&#xff0c;如何…...

算法 ——世界 二

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。个人爱好: 编程&#xff0c;打篮球&#xff0c;计算机知识个人名言&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石…...

数据治理CDGP选择题 4

5、根据DMBOK2&#xff0c;在实施数据治理时&#xff0c;要注重数据标准的建设&#xff0c;以下关于数据标准的描述&#xff0c;哪个选项是不正确的? (知识点: CDGP仿真题)A.数据标准必须得到有效沟通、监控&#xff0c;并被定期审查和更新;最重要的是&#xff0c;必须有强制手…...

动态规划之01背包问题和完全背包问题

01背包的问题描述&#xff1a;&#xff08;内容参考代码随想录&#xff09;有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。问题示例&#…...

MATLAB算法实战应用案例精讲-【图像处理】数字图像灰度化(附Java、python、matlab和opencv代码实现)

目录 前言 几个相关概念 1、RGB 2、ARGB 3、灰度化 4.图像点运算 5.线性点运算...

Linux(强大的yum命令)

yum 读 [jʌm] &#xff0c;中文谐音&#xff1a; 样安ing。 yum&#xff08; Yellow dog Updater, Modified&#xff09;是一个在 Fedora 和 RedHat 以及 SUSE 中的 Shell 前端软件包管理器。 基于 RPM 包管理&#xff0c;能够从指定的服务器自动下载 RPM 包并且安装&#x…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...