面试题:React的真实DOM和虚拟DOM的区别

真实DOM,就是文档对象类型,在页面上渲染的每一个节点都是一个真实DOM结构。

虚拟DOM,就是一个描述描述DOM结构的对象。

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

在React中,ReactDOM.render()函数将虚拟DOM节点插入到真实DOM节点上,并且渲染到页面上。

虚拟DOM和真实DOM的区别:

  1. 虚拟DOM不会进行重排和重绘,操作真实DOM的时候,会频繁触发重排和重绘;
  2. 虚拟DOM的总消耗性能为:虚拟DOM的增删改、真实DOM差异增删改和重排重绘;真实DOM性能消耗为真实DOM增删改加上重排重绘;

如果是原生JavaScript来操作DOM,浏览器会从构建DOM开始,从头到尾执行一遍流程。比如在操作一次,需要更新10个DOM节点,那么浏览器会执行10次流程。

然而通过虚拟DOM来完成的话,同样的更新10个节点,虚拟DOM不会马上操作DOM,而是把10次更新的diff内容保存在本地内存的一个js对象上,最后才把这个js对象转化为真实DOM。

虚拟DOM与真实DOM的优缺点:

真实DOM容易理解,但是开发效率低,体验差;

虚拟DOM是使用,提升了开发效率和体验,同时实现跨平台能力,一套代码多端运行。缺点是在一些性能要求极高的应用中,虚拟DOM无法进行针对性的优化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/799110.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【云开发笔记NO.22】运用云原生产品打造技术中台

一、云原生产品与技术中台的结合点 云原生产品以其容器化、微服务化、自动化等特性,为技术中台的建设提供了强大的技术支持。容器化技术使得应用可以更容易地进行部署和管理,提高了应用的可移植性和弹性。微服务架构则让应用更加模块化,便于…

石器时代_单机版_1.0到9.0全部版本集_内附教程

一. 版本介绍图 二. 运行环境 pc单机,可在所有windows系统畅玩,内附安装教程。 三. 源码获取 https://githubs.xyz/y27.html

Android 11 添加系统属性

在初识Android 属性一文中提到,系统会默认加载以下文件 /system/etc/prop.default /system/build.prop /system_ext/build.prop /vendor/default.prop /vendor/build.prop /odm/etc/build.prop /product/build.prop /factory/factory.prop要弄清楚我们应该在哪里添…

学浪app中的视频怎么缓存

现在越来越多人在学浪app里面购买课程,有的课程有时间限制,想要下载下来,如果你还不知道下载的方法,可以看看我这篇文章,专门讲解如何缓存学浪app里面的课程 讲技术方法很多人可能听不懂,所以我就将技术融…

【项目实战】【Docker】【Git】【Linux】部署V2rayA项目

今天着手了一个全新领域的项目,从完全没有头绪到成功运行,记录一下具体的部署流程 github项目链接V2rayA 一开始拿到以后完全没有抓手,去阅读了一下他的帮助文档 写着能用docker运行,就去下载了一个Docker配置了一下 拉取代码到…

如何构建和安装 Go 程序

简介 到目前为止,在我们的《如何使用 Go 编程》系列中,您已经使用 go run 命令自动编译您的源代码并运行生成的可执行文件。虽然这个命令对于在命令行上测试代码很有用,但是要分发或部署应用程序,您需要将代码构建成一个可共享的…

瑞_23种设计模式_访问者模式

文章目录 1 访问者模式(Visitor Pattern)1.1 介绍1.2 概述1.3 访问者模式的结构1.4 访问者模式的优缺点1.5 访问者模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 拓展——双分派4.1 分派4.2 动态分派(多态&am…

4.网络编程-websocket(golang)

目录 什么是websocket golang中使用websocket Server端 Client端 什么是websocket WebSocket是一种在互联网上提供全双工通信的协议,即允许服务器和客户端之间进行双向实时通信的网络技术。它是作为HTML5的一部分标准化的,旨在解决传统HTTP协议在实…

uniapp使用vuex

1、uniapp中使用vuex_uniapp使用vuex-CSDN博客 2、uniapp中使用vuex(store)模块的例子 - 简书 (jianshu.com) 3、vuex介绍及使用指南(面向实战)_vuex 实战应用-CSDN博客

工程中实践的微服务设计模式

大家好,我是 方圆。最近在读《微服务架构设计模式》,开始的时候我非常的好奇,因为在我印象中,设计模式是常说的那23种设计模式,而微服务的设计模式又是什么呢?这个问题也留给大家,在文末我会附上…

opencv图像处理技术(阈值处理与图像平滑)

进行图像处理时,常常需要对图像进行预处理以提取所需的信息或改善图像质量。阈值处理和图像平滑是两种常见的预处理技术。 阈值处理 阈值处理是一种图像分割技术,其基本思想是将图像中的像素值与一个或多个预先设定的阈值进行比较,根据比较…

PCL 线段到三角形的距离(3D)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里沿用之前直线到三角形的距离计算思路: 1、首先,我们可以判断直线与三角形是否相交,相交则距离为0,这里可以参考之前的博客:PCL 计算一条射线与一个三角形的交点。 2、如果直线与三角形未相交,则只需要判断…

【人工智能】猫狗识别

猫狗识别 实验背景 数据集介绍 我们使用CIFAR10数据集。CIFAR10数据集包含60,000张32x32的彩色图片,10个类别,每个类包含6,000张。其中50,000张图片作为训练集,10000张作为验证集。这次我们只对其中的猫和狗两类进行预测。 图 1 CIFAR10 数据…

Windows11配置VUE开发环境

目录 一、按照nodejs二、命令安装npm cache clean --forcenpm install -g vue/clinpm install npm -gnpm install webpacknpm install vue-cli -g与npm install -g vue/cli区别npm install -g cnpm --registryhttps://registry.npm.taobao.orgnpm i yarn -g --verbosenpm i -g …

网络与并发编程(一)

并发编程介绍_串行_并行_并发的区别 串行、并行与并发的区别 串行(serial):一个CPU上,按顺序完成多个任务并行(parallelism):指的是任务数小于等于cpu核数,即任务真的是一起执行的并发(concurrency):一个CPU采用时间…

IDEA 导出jar无法执行 错误: 找不到或无法加载主类

1、首先配置正确Project Struct 保证需要引用的jar包库添加到Libraries里,尽管添加到Modules里依然可以测试运行或调试,但导出的jar包会遇到问题。 2、导出jar,方式选择如下 选择”From modules with dependencies" 然后去掉以上“Extr…

手机如何在线制作gif?轻松一键在线操作

现在大家都喜欢使用手机来拍摄记录有趣的事物,但是时间长了手机里的视频越来越多导致手机存储空间不够了,这些视频又不想删除时应该怎么办呢?这个很简单,下面就给大家分享一款不用下载手机就能操作的视频转gif网站-GIF中文网&…

【贪玩巴斯】Mac的M芯片(M1/2...)下载homebrew方法(24年最新且已验证可行)

1. 按照目前广为流传的方法(M1会出现一些问题): 终端输入: /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 使用国内镜像下载。 2. 输入后按照要求步骤执行即可&#xff…

k8s单节点部署,容器运行时使用containerd

环境 系统 : entOS Linux release 7.9.2009 (CoreIP:192.168.44.177 硬件要求:控制平面最少需要 2c2g 安装前环境准备 如果是集群部署还需要配置时间同步 关闭防火墙 systemctl disable firewalld关闭selinux setenforce 0sed -i s/SELI…

KADB锁冲突查看及解决

构造锁冲突 分布开启两个终端,一个终端执行: begin; update data_table set addrtest where id89; 另外一个终端执行: alter table data_table add test varchar(20); 观察锁冲突情况 test# select pid,waiting,waiting_reason,query from p…