详谈面试题:Vue、React为什么使用虚拟DOM

虚拟DOM是一种在前端框架中广泛使用的技术,它可以提升开发效率。那么国外流行的框架svelte没有使用虚拟DOM,而是直接操作真实DOM,效率依然很高。为什么Vue和React不采用这种方式呢?

目录

一、框架设计

二、解耦运行环境 

三、总结


一、框架设计

Vue和React的框架设计无法做到这点,因为框架的颗粒度没有那么细,它们的最小颗粒度是精确到组件的,也就是说,在Vue和React的框架中,数据变化了,操作的不是真实DOM,而是组件。

组件中是由render函数来渲染组件的,假如组件中有很多真实DOM,如果数据变化,会导致render函数重新运行,在react里面就是函数式组件重新运行,数据变化后在render函数重新生成真实DOM的代价太大了,因为可能操作到的数据,只关联一个真实的DOM,而重新运行把很多不需要的的DOM生成出来了。效率就会非常低。因此选择生成虚拟DOM(JS对象),通过对比,精准定位到真实DOM哪里需要更新。

而Svelte不需要考虑这样的问题。

Svelte框架选择不使用虚拟DOM而是直接操作真实DOM,并且依然保持高效率的原因主要有以下几点:

  1. 编译时优化:Svelte通过其强大的编译器在构建时将模板和响应式逻辑转换成高效的JavaScript代码。这意味着所有对DOM的操作都在编译时被优化,而不是在运行时。

  2. 声明式编程:Svelte允许开发者以声明式的方式编写代码,框架自动处理DOM更新。开发者只需关注状态变化,而框架负责将这些变化映射到DOM上,减少了手动操作DOM的复杂性。

  3. 避免不必要的DOM操作:Svelte的编译器能够精确地识别出哪些DOM操作是必要的,从而避免不必要的DOM操作和渲染,这减少了运行时的性能开销。

  4. 响应式声明:在Svelte中,开发者只需声明响应式变量,框架会自动处理依赖跟踪和更新DOM,这种机制减少了手动操作DOM的需要,并且提高了效率。

二、解耦运行环境 

Vue和React的框架在设计时,是希望代码可移植到其他环境,如小程序,移动端等等,而不仅仅是浏览器环境。所以不能绑定真实DOM,因为真实DOM只有浏览器环境中有。

为了解耦环境,将真实DOM提取成JS对象的形式来描述界面,JS对象是ES的范畴,只要环境支持ES,就一定支持ES对象。这样不同环境都可以使用同一套对象描述界面,用虚拟DOM进行不同的渲染。支持多端开发

三、总结

  1. 性能优化:虚拟DOM通过减少对真实DOM的操作次数来提高性能。由于DOM操作是昂贵的,直接操作DOM会导致性能问题,尤其是在数据频繁更新时。虚拟DOM允许框架通过比较前后两个虚拟DOM树的差异,找出最小更新范围,然后只更新那些实际变化的部分,从而减少不必要的DOM操作。

  2. 跨平台渲染:虚拟DOM提供了跨平台渲染的能力,使得Vue和React的应用不仅限于浏览器环境。例如,React Native利用虚拟DOM在移动设备上渲染应用界面,而Vue也可以通过Weex等技术实现跨平台渲染。

  3. 批量更新和优化:虚拟DOM允许批量更新,将多个数据变更合并为一次操作,减少DOM操作次数,提高性能。这种批量更新机制可以减少页面的重绘和回流,提升渲染效率。

  4. 开发体验:虚拟DOM提供了声明式的编程模式,开发者可以更专注于数据和状态,而不必过多关心底层的DOM操作。这种模式简化了开发流程,提高了开发效率。

  5. 组件粒度的更新:在Vue和React中,数据变化时,操作的不是单个真实DOM,而是组件。组件的更新是由render函数来渲染的,如果组件中包含很多真实DOM,数据变化会导致render函数重新运行,这可能导致不必要的DOM生成,影响效率。虚拟DOM通过对比,精准定位到真实DOM哪里需要更新,避免了这种低效的操作。

  6. 避免回流和重绘:虚拟DOM不会进行回流和重绘;真实DOM在频繁操作时引发的回流重绘导致性能降低。虚拟DOM有效降低大面积的重绘与排版,因为是和真实DOM对比,更新差异部分,所以只渲染局部。

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

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

相关文章

前端JavaScript(一)---基本介绍

Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对…

(免费送源码)计算机毕业设计原创定制:Java+B/S+SSM+Web前端开发技术+IDEA+MySQL+Navicat 有风小院

摘 要 信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题。针对有风小院等问题,对有风小院信息…

Soul App创始人张璐团队亮相GITEX GLOBAL 2024,展示多模态AI的交互创新

随着全球AI领域的竞争加剧,越来越多的科技巨头和创新企业纷纷致力于多模态AI的开发。2024年10月14日至18日,GITEX GLOBAL海湾信息技术博览会在迪拜举行,吸引了超过6700家全球科技巨头和创新公司参与,展示了智能互联、人工智能等领域的新成果。 此次展会中,Soul App创始人张璐团…

新版布谷直播软件源码开发搭建功能更新明细

即将步入2025年也就是山东布谷科技专注直播系统开发,直播软件源码出售开发搭建等业务第9年,山东布谷科技不断更新直播软件功能,以适应当前新市场环境下的新要求。山东布谷科技始终秉承初心,做一款符合广大客户需求的直播系统软件。支持广大客户提交更多个…

Dockerfile打包部署

Dockerfile打包 先找到打包完的目录下创建一个Dockerfile文件 touch Dockerfile 进去文件内编写 vim Dockerfile # 基础镜像 FROM openjdk:8 # author MAINTAINER yxh # 挂载目录 VOLUME /home/project # 创建目录 RUN mkdir -p /home/project # 指定路径 WORKDIR /home/pr…

c++趣味编程玩转物联网:基于树莓派Pico控制有源蜂鸣器

有源蜂鸣器是一种简单高效的声音输出设备,广泛应用于电子报警器、玩具、计时器等领域。在本项目中,我们结合树莓派Pico开发板,通过C代码控制有源蜂鸣器发出“滴滴”声,并解析其中涉及的关键技术点和硬件知识。 一、项目概述 1. 项…

【NLP高频面题 - 分布式训练】ZeRO1、ZeRO2、ZeRO3分别做了哪些优化?

【NLP高频面题 - 分布式训练】ZeRO1、ZeRO2、ZeRO3分别做了哪些优化? 重要性:★★ NLP Github 项目: NLP 项目实践:fasterai/nlp-project-practice 介绍:该仓库围绕着 NLP 任务模型的设计、训练、优化、部署和应用&am…

路由引入中次优路由和路由环路问题

A公司用的是IS-IS,B公司用的是OSPF,现在这两个公司要合并,网络要相通 项目目标 前期准备 配置IP地址:完成IP地址规划,A公司和B公司内部网络通过路由器R2和R4环回接口模拟。配置路由器接口的IP地址并测试所有直连链路的…

shell脚本基础学习_总结篇(完结)

细致观看可以,访问shell脚本学习专栏,对应章节会有配图https://blog.csdn.net/2201_75446043/category_12833287.html?spm1001.2014.3001.5482 导语 一、shell脚本简介 1. 定义: 2. 主要特点: 3. shell脚本的基本结构 4. S…

光伏功率预测!Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型时序预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型多变量时序光伏功率预测 (Matlab2023b 多输入单输出) 1.程序已经调试好,替换数据集后,仅运行一个main即可运行,数据格式…

Postman定义公共函数

🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 Postman定义公共函数 在postman中,如下面的代码: 1、返回元素是否与预期值一致 var assertEqual(name,actual,expected)>{tests[…

SpringAI:Java 开发的智能新利器

一、SpringAI 简介 随着人工智能技术的飞速发展,越来越多的开发者开始探索如何将 AI 能力集成到现有的应用中来提升产品的智能化水平。Spring AI 正是为 Java 开发者提供的一款强大的 AI 框架,使得这一集成过程变得前所未有的简单和高效。 本文将深入探…

javaweb-day02-JS(javascript)

1.JavaScript引入 (1)引入方式 2.JS语法 2.1 书写语法 2.2 变量 (1)var关键字定义的是全局变量; (2)可以重复声明; 2.3 数据类型&运算符 (1)数据类型…

极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【三】

GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料: 极狐GitLab 官网极狐…

七牛云AIGC内容安全方案助力企业合规创新

随着人工智能生成内容(AIGC)技术的飞速发展,内容审核的难度也随之急剧上升。在传统审核场景中,涉及色情、政治、恐怖主义等内容的标准相对清晰明确,但在AIGC的应用场景中,这些界限变得模糊且难以界定。用户可能通过交互性引导AI生成违规内容,为审核工作带来了前所未有的不可预测…

Python语法基础(三)

🌈个人主页:羽晨同学 💫个人格言:“成为自己未来的主人~” 我们这篇文章来说一下函数的返回值和匿名函数 函数的返回值 我们先来看下面的这一段函数的定义代码 # 1、返回值的意义 def func1():print(111111111------start)num166print…

导入100道注会cpa题的方法,导入试题,自己刷题

一、问题描述 复习备考的小伙伴们,往往希望能够利用零碎的时间和手上的试题,来复习和备考 用一个能够导入自己试题的刷题工具,既能加强练习又能利用好零碎时间,是一个不错的解决方案 目前市面上刷题工具存下这些问题 1、要收费…

使用flink编写WordCount

1. env-准备环境 2. source-加载数据 3. transformation-数据处理转换 4. sink-数据输出 5. execute-执行 流程图&#xff1a; DataStream API开发 //nightlies.apache.org/flink/flink-docs-release-1.13/docs/dev/datastream/overview/ 添加依赖 <properties>&l…

【SpringBoot】28 API接口防刷(Redis + 拦截器)

Gitee仓库 https://gitee.com/Lin_DH/system 介绍 常用的 API 安全措施包括&#xff1a;防火墙、验证码、鉴权、IP限制、数据加密、限流、监控、网关等&#xff0c;以确保接口的安全性。 常见措施 1&#xff09;防火墙 防火墙是网络安全中最基本的安全设备之一&#xff0c…

java全栈day10--后端Web基础(基础知识)

引言&#xff1a;只要能通过浏览器访问的网站全是B/S架构&#xff0c;其中最常用的服务器就是Tomcat 在浏览器与服务器交互的时候采用的协议是HTTP协议 一、Tomcat服务器 1.1介绍 官网地址&#xff1a;Apache Tomcat - Welcome! 1.2基本使用(网上有安装教程&#xff0c;建议…