详谈面试题: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.mzph.cn/news/887755.shtml

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

相关文章

Next.js-样式处理

#题引:我认为跟着官方文档学习不会走歪路 Next.js 支持多种为应用程序添加样式的方法,包括: CSS Modules:创建局部作用域的 CSS 类,避免命名冲突并提高可维护性。全局 CSS:使用简单,对于有传统…

神经网络中的损失函数(Loss Function)

损失函数(Loss Function)在机器学习和深度学习中扮演着至关重要的角色,它是衡量模型预测值与实际值之间差异程度的函数。通过最小化损失函数,我们可以优化模型的参数,使其预测结果更加准确。 一、损失函数的定义 损失函…

AWS账户是否支持区域划分?

在云计算的世界中,亚马逊网络服务(AWS)凭借其全球化的基础设施和丰富的服务选项受到许多企业和开发者的青睐。一个常见的问题是:AWS账户是否支持区域划分?为了回答这个问题,我们九河云一起深入了解AWS的区域…

鼠标前进后退键改双击,键盘映射(AutoHotkey)

初衷: 1.大部分鼠标为不可自定义按键,可以自定义的又很贵。 鼠标左键是双击是很频类很高的操作,鼠标前进/后退按键个人感觉使用频率很低,因此把鼠标前进/后退改为双击还是很合适的。 2.有些短款的键盘没有Home或End键,…

华为海思2025届校招笔试面试经验分享

目前如果秋招还没有offer的同学,可以赶紧投递下面这些公司,都在补招。争取大家年前就把后端offer拿下。如果大家在准备秋招补录取过程中有任何问题,都可以私信小编,免费提供帮助。如果还有部分准备备战春招的同学,也可…

Springboot项目搭建(7)-Layout界面布局

1.概要 初步搭建了Layout界面的布局,其中包括左侧导航栏及其路由功能,和右侧头、体、脚部分的大致排版。最后在头部分中的昵称与头像替换成动态数据。 2.Layout主页布局 文件地址:src\views\Layout.vue 2.1 script行为模块 从elementUI中…

c语言的qsort函数理解与使用

介绍:qsort 函数是 C 标准库中用于排序的快速排序算法函数。它的用法非常灵活,可以对任意类型的元素进行排序,只要提供了比较函数即可。 qsort 函数原型及参数解释: void qsort ( void* base, //指向要排序的数组的首元素…

#渗透测试#红蓝攻防#HW#漏洞挖掘#漏洞复现01-笑脸漏洞(vsftpd)

免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…

(73)脉冲幅度调制PAM调制解调通信系统的MATLAB仿真

文章目录 前言一、PAM调制的基本原理二、PAM调制的步骤三、PAM调制示例四、PAM调制的应用五、MATLAB仿真1. 仿真代码2. 仿真结果 总结 前言 PAM(Pulse Amplitude Modulation,脉冲振幅调制)是一种模拟信号到数字信号的转换方式,它…

算法的NPU终端移植:深入探讨与实践指南

目录 ​编辑 引言 算法选择 模型压缩 权重剪枝 量化 知识蒸馏 硬件适配 指令集适配 内存管理 并行计算 性能测试 速度测试 精度测试 功耗测试 案例分析 图像识别算法的NPU移植案例 结论 引言 在人工智能技术的浪潮中,神经网络处理器(…

汽车免拆诊断案例 | 2017款捷豹F-PACE车发动机偶尔怠速不稳

故障现象  一辆2017款捷豹F-PACE车,搭载2.0 L GTDi发动机,累计行驶里程约为16万km。车主反映,车辆组合仪表上发动机故障灯点亮(图1),且发动机偶尔怠速不稳。 图1 发动机故障灯点亮 故障诊断 接车后试车…

不建模,无代码,如何快速搭建VR虚拟展厅?

不建模、无代码搭建虚拟展厅,可以借助一些专业的虚拟展厅搭建平台或工具来实现。以下是一些具体的步骤和建议: 一、选择平台或工具 首先,需要选择一个适合的平台或工具来搭建虚拟展厅。这些平台通常提供预设的展厅模板、拖拽式编辑工具和丰富…

数星星 (C++ 树状数组)

1265. 数星星 - AcWing题库 分析: 星星是按纵坐标递增给我们的,如果纵坐标相同,就按横坐标来给 所以星星是从低到高,一行一行来给的 题目要求我们去求每个等级的星星各有多少个 星星的等级由它左下角(包括左边和下…

AIGC培训讲师人工智能培训讲师叶梓Python深度学习与AIGC培训提纲

【课程时长】 8天(6小时/天) 【课程简介】 随着AIGC(基于AI的内容生成)技术的崛起,以ChatGPT为代表的人工智能技术正引领全球科技潮流。为了帮助学员更好地理解和应用这一技术,特推出了本课程。 本课程…

GB28181系列三:SIP消息格式

我的音视频/流媒体开源项目(github) GB28181系列目录 目录 一、SIP消息Header字段 二、SIP URI(URL) 三、SIP路由机制 1、路由机制介绍 2、严格路由(Strict Routing)与松散路由(Louse Routing) 3、总结 四、SIP消…

STM32-C语言基础知识

C语言基础知识 stdint.h简介 给寄存器某个位赋值 给位6赋值为1流程:先清0,再赋值 带参数的宏定义 建议使用do {…}while(0)来构造宏定义 条件编译 条件编译后面必须跟宏语句,如#if _LED_H 指针使用常见的2大问题 1、未初始化 2、越界使…

计算机网络 实验八 应用层相关协议分析

一、实验目的 熟悉CMailServer邮件服务软件和Outlook Express客户端软件的基本配置与使用;分析SMTP及POP3协议报文格式和SMTP及POP3协议的工作过程。 二、实验原理 为了观察到邮件发送的全部过程,需要在本地计算机上配置邮件服务器和客户代理。在这里我…

若依解析(一)登录认证流程

JWTSpringSecurity 6.X 实现登录 JWT token只包含uuid ,token 解析uuid,然后某个常量加UUID 从Redis缓存查询用户信息 流程图如下 感谢若依,感谢开源,能有这么好系统供我学习。 设计数据库,部门表,用户表&#xff0c…

阿里巴巴即将超越OpenAI的o1?

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

第29天 MCU入门

目录 MCU介绍 MCU的组成与作用 电子产品项目开发流程 硬件开发流程 常用元器件初步了解 硬件原理图与PCB板 常见电源符号和名称 电阻 电阻的分类 贴片电阻的封装说明: 色环电阻的计算 贴片电阻阻值计算 上拉电阻与下拉电阻 电容 电容的读数 二极管 LED 灯电路 钳位作…