详谈面试题: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,一经查实,立即删除!

相关文章

PHP md5函数 生成的字符串是多少位的

PHP md5() 函数生成的是一个32位的十六进制字符串。 MD5 散列值通常以十六进制数字形式表示,为了保证散列值的唯一性和不可预测性,它们通常由0-9以及a-f的16个字符组成,总共是32个字符。 以下是PHP代码示例: $str "Hello,…

Next.js-样式处理

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

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

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

Kong API Gateway 深度解析与实战指南

1. 简介 1.1 什么是Kong API Gateway? Kong 是一款广泛使用的开源 API Gateway 和微服务管理工具,最初由 Mashape(现为 Kong Inc.)在 2015 年推出。它基于 Nginx 和 OpenResty 构建,旨在为现代应用程序提供高性能、可…

Three.js渲染较大的模型之解决方案

文章目录 Three.js渲染较大的模型 解决方案视锥体剔除实例 和 遮挡剔除 实例视锥体剔除(Frustum Culling)实例原理概述代码示例解释 遮挡剔除(Occlusion Culling)实例原理概述代码示例解释 three.js 模型压缩 Three.js渲染较大的模…

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

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

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

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

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

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

C语言解决空瓶换水问题:高效算法与实现

标题:C语言解决空瓶换水问题:高效算法与实现 一、问题描述 在一个饮料促销活动中,你可以通过空瓶换水的方式免费获得更多的水:3个空瓶可以换1瓶水。喝完这瓶水后,空瓶会再次变为空瓶。假设你最初拥有一定数量的空瓶&a…

MySQL乐观锁

前言 乐观锁是一种并发控制机制,它假设在大多数情况下不会发生冲突,因此在事务执行过程中不加锁。只有在提交时才会检查数据是否被其他事务修改过。如果数据在此期间被修改了,则当前事务会被回滚或者需要重新执行。乐观锁的主要用途和优势包…

力扣hot100-->前缀和/前缀书/LRU缓存

前缀和 1. 560. 和为 K 的子数组 中等 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1: 输入:nums [1,1,1], k 2 输出:2示例 2&#…

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

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

uniapp 安卓和ios震动方法,支持息屏和后台震动,ios和安卓均通过测试

最近使用uniapp开发震动功能,发现uniapp提供的 uni.vibrateLong()的方法震动比较弱,而且不支持息屏和后台震动。plus.ios.importClass("UIImpactFeedbackGenerator")是在网上看到的,这个震动也比较弱,ios也不支持息屏和…

JAVA项目-------医院挂号系统

1,项目目的 1、科室管理:新增科室,删除科室(如果有医生在,则不能删除该科室),修改科室。 2、医生管理:录入医生信息,以及科室信息。修改医生信息(主要是修改…

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

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

SpringBoot(三十八)SpringBoot-mybatis开启事务

在浏览myBatis相关文档的时候,突然想到一个小问题,到目前为止,好像我还没有使用过事务,这个不太应该。 这里我们刚好来测试一下事务叭。 一:添加pom依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifact…

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

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

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

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

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

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

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

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