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

React 中为什么不直接使用 requestIdleCallback?

news 来源：原创 2025/7/12 23:04:21

首先看下 `requestIdleCallback`是什么？

简介
requestIdleCallback 是一个在浏览器空闲时执行低优先级任务的 API。
定义与用途

requestIdleCallback 方法允许开发者在浏览器的空闲时段内调度函数的执行。这些函数通常用于执行非关键性的、低优先级的任务，如统计数据发送、非核心动画或页面渲染优化等。它旨在确保高优先级任务（如用户交互、关键动画等）能够优先得到处理，从而避免页面卡顿或性能下降。
工作原理
当浏览器的主线程处于空闲状态时，requestIdleCallback 会调用指定的回调函数。回调函数会接收一个名为 deadline 的对象作为参数，该对象包含两个属性：
- timeRemaining()：返回一个表示浏览器空闲时间剩余量的毫秒数。开发者可以利用这个值来判断是否还有足够的空闲时间来执行任务。
- didTimeout：一个布尔值，用于指示回调函数是否因为超出了指定的超时时间而被强制执行。如果为 true，则表示回调函数是由于超时而被调用的。

使用示例

// 定义一个任务列表
const tasks = [];// 添加任务到任务列表
function addTask(task) {tasks.push(task);// 如果当前没有正在进行的请求，则请求下一个空闲时段来执行任务if (tasks.length === 1) {requestIdleCallback(processIdleTasks);}
}// 在空闲时段内执行任务
function processIdleTasks(deadline) {while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {const task = tasks.shift();task();}// 如果还有未完成的任务，则继续请求下一个空闲时段if (tasks.length > 0) {requestIdleCallback(processIdleTasks);}
}// 添加低优先级任务
addTask(() => console.log('Task 1'));
addTask(() => console.log('Task 2'));
addTask(() => console.log('Task 3'));

在这个示例中，我们定义了一个任务列表 tasks 和两个函数 addTask 和 processIdleTasks。addTask 函数用于将任务添加到任务列表中，并在必要时请求下一个空闲时段来执行任务。processIdleTasks 函数则在浏览器的空闲时段内循环执行任务，直到没有剩余空闲时间或没有未完成的任务为止。

`React` 中不直接使用 `requestIdleCallback` 的原因涉及多个方面

控制精细度不足
React 需要对渲染任务进行精细的控制，以确保用户界面的响应性和性能。requestIdleCallback 虽然提供了一种在浏览器空闲时执行低优先级任务的方法，但其控制精细度相对较低。React 需要根据组件的优先级、更新的紧急程度等信息来安排渲染任务，而 requestIdleCallback 只能保证在浏览器空闲时执行任务，无法提供足够的控制来满足 React 的需求。
跨浏览器兼容性问题
requestIdleCallback 在不同浏览器中的支持程度存在差异。虽然现代浏览器普遍支持该 API，但在一些旧版本或特定浏览器（如 Safari 的某些版本）中可能不受支持或存在兼容性问题。React 需要一个能够跨各个版本或框架的解决方案，以确保一致的性能体验。因此，直接使用 requestIdleCallback 可能会导致在不同浏览器中出现不一致的行为。
时间片化机制的需求
React 使用了时间片化（Time Slicing）技术来优化渲染性能。时间片化允许 React 将渲染任务分割成多个小任务，并在多个帧中交错执行，从而避免长时间占用主线程并导致用户界面卡顿。React 的调度器可以根据任务的优先级和紧急程度来动态调整时间片的分配。而 requestIdleCallback 只能保证在浏览器空闲时执行任务，无法提供时间片化所需的灵活性和动态调整能力。
更丰富的调度策略
React 的调度器提供了比 requestIdleCallback 更丰富的调度策略和特性。例如，React 的调度器支持多种优先级级别（如立即执行、用户阻塞、正常、低优先级和空闲执行任务等），可以根据任务的优先级来动态调整渲染顺序。此外，React 的调度器还支持任务的中断和恢复，以便在需要时暂停当前任务并处理更高优先级的任务。这些特性使得 React 能够更好地管理任务的优先级和渲染顺序，从而提供更高质量的用户体验。

番外篇

react的调度原理
React的调度原理是其性能优化的核心机制之一，它主要涉及任务调度、优先级管理以及时间分片等技术。以下是对React调度原理的详细解释：
- 任务调度
  React通过调度器（Scheduler）来控制任务的执行顺序和时机。调度器是React运行时中的中枢，它负责接收任务并将其放入适当的队列中，然后根据任务的优先级和当前浏览器的空闲状态来决定何时执行任务。
  - 任务队列：React使用多个队列来存储任务，这些队列根据任务的优先级和类型进行分类。常见的队列包括同步队列（syncQueue）、异步队列（asyncQueue）以及定时器队列（TimerQueue）等。
  - 任务入队：当一个新的任务被创建时，它会被封装成一个Fiber对象（React 16中引入的调度器的核心工作单元），并根据其优先级和类型被放入相应的队列中。
  - 任务执行：调度器会遍历任务队列，并根据任务的优先级和当前浏览器的空闲状态来决定何时开始执行任务。在执行任务时，调度器会采用时间分片的技术来避免长时间占用主线程。
- 优先级管理
  React中的任务根据其重要性和紧急性被赋予不同的优先级。优先级管理使得React能够更有效地利用浏览器的资源，确保高优先级任务能够优先得到处理。
  - 优先级类型：React内部定义了多种优先级类型，包括事件优先级（Event Priority）、车道优先级（Lane Priority）和调度优先级（Scheduler Priority）等。这些优先级类型通过不同的数值和位运算来表示。
  - 优先级转换：在任务创建和调度过程中，React会进行优先级转换，将不同优先级类型映射到统一的调度优先级上。这使得调度器能够根据统一的优先级标准来管理和执行任务。
- 时间分片
  时间分片是React性能优化的关键技术之一。它通过将长任务拆分成多个小任务并在浏览器的空闲时段内逐个执行，从而避免了长时间占用主线程导致的页面卡顿问题。
  - 时间切片周期：React的时间切片周期通常设置为5毫秒（ms），这意味着每个小任务在执行一段时间后（不超过5ms）会主动让出主线程的控制权，以便浏览器能够处理其他紧急任务（如用户输入、UI绘制等）。
  - 中断与恢复：在时间分片机制下，如果一个任务在执行过程中被中断（例如，因为浏览器的其他高优先级任务需要执行），React会记住该任务的执行状态并在下一个空闲时段内继续执行它。这种中断和恢复的能力使得React能够更有效地利用浏览器的资源并提升用户体验。
总结调度流程

React的调度流程涉及多个步骤和组件的协同工作，包括任务的创建、入队、执行以及中断与恢复等。以下是React调度流程的一个简要概述：
- 任务创建：当用户触发更新（例如，通过调用setState或forceUpdate等方法）时，React会创建一个新的任务并将其封装成一个Fiber对象。
- 任务入队：根据任务的优先级和类型，React将任务放入相应的队列中（如同步队列、异步队列等）。
- 任务执行：调度器遍历任务队列并根据优先级和当前浏览器的空闲状态来决定何时开始执行任务。在执行任务时，React会采用时间分片的技术来避免长时间占用主线程。
- 中断与恢复：如果一个任务在执行过程中被中断（例如，因为浏览器的其他高优先级任务需要执行），React会记住该任务的执行状态并在下一个空闲时段内继续执行它。

React 中为什么不直接使用 requestIdleCallback?

首先看下 requestIdleCallback是什么？ 简介 requestIdleCallback 是一个在浏览器空闲时执行低优先级任务的 API。定义与用途 requestIdleCallback 方法允许开发者在浏览器的空闲时段内调度函数的执行。这些函数通常用于执行非关键性的、低优先级的任务&#xff0c…...

编程日记 2025/7/12 23:04:21

工作：SolidWorks从3D文件导出2D的DWG或DXF类型文件方法

工作：SolidWorks从3D文件导出2D的DWG或DXF类型文件方法 SolidWorks从3D文件导出2D的DWG或2D DXF类型文件方法（一）打开3D文件（二）从装配体到工程图（三）拖出想要的角度的图型（四&#…...

编程日记 2025/7/12 22:34:43

element-ui radio和checkbox禁用时不置灰还是原来不禁用时的样式

把要紧用的内容加上一个class"notEdit-page" z注意要在style里面写不能加上scoped /*//checkBox自定义禁用样式*//*//checkBox自定义禁用样式*/ .notEdit-page.el-checkbox__input.is-disabled.is-checked.el-checkbox__inner::after {border-color: #fff; } .notEdi…...

编程日记 2025/7/12 22:30:54

MySQL 8.0 安装与配置技术文档(Ubuntu22.04)

MySQL 8.0 安装与配置技术文档目录环境准备下载 MySQL 安装包检查是否已安装 MySQL彻底卸载 MySQL安装 MySQL配置 MySQL创建用户并允许外网访问修改 root 用户密码参考链接 1. 环境准备确保系统为 Ubuntu 22.04，并安装了以下基础工具： sudo apt-ge…...

编程日记 2025/7/12 23:01:16

【Linux】Ubuntu中安装多个版本的gcc、g++编译器，并自由切换

1、安装 1.1 命令安装使用命令直接安装： sudo apt install gcc-[版本号] sudo apt install g++-[版本号]例如： sudo apt install gcc-10 sudo apt install g++-10 sudo apt install gcc-9 sudo apt install g++-9 sudo apt install gcc-8 sudo apt install g++-81.2 源码…...

编程日记 2025/7/12 22:40:43

uni-app登录界面样式

非常简洁的登录、注册界面模板，使用uni-app编写，直接复制粘贴即可，无任何引用，全部公开。废话不多说，代码如下： login.vue文件 <template><view class"screen"><view class"…...

编程日记 2025/7/8 1:17:06

如何在小米平板5上运行 deepin 23 ？

deepin 23 加入了 ARM64 支持，这里尝试将 deepin 系统刷入平板中，平常使用中，带个笔记本电脑有时候也会嫌比较麻烦，把 Linux 系统刷入平板中既满足了使用需要，又满足了轻便的需求。为什么不使用 Termux ？虽…...

编程日记 2025/7/12 22:44:20

Linux上的C语言编程实践

说明： 这是个人对该在Linux平台上的C语言学习网站笨办法学C上的每一个练习章节附加题的解析和回答 ex1: 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后运行它看看发生了什么。 vim ex1.c打开 ex1.c 文件。假如我们删除 return 0…...

编程日记 2025/7/12 21:56:31

ubuntu中使用ffmpeg库进行api调用开发

一般情况下，熟悉了ffmpeg的命令行操作，把他当成一个工具来进行编解码啥的问题不大，不过如果要把功能集成进自己的软件中，还是要调用ffmpeg的api才行。 ffmpeg的源码和外带的模块有点太多了，直接用官网别人编译好的库就…...

编程日记 2025/7/12 4:21:09

基于yolov8的SAR影像目标检测系统，支持图像、视频和摄像实时检测【pytorch框架、python源码】

更多目标检测、图像分类识别、目标追踪等项目可看我主页其他文章功能演示： 基于yolov8的SAR影像目标检测系统，支持图像、视频和摄像实时检测【pytorch框架、python源码】_哔哩哔哩_bilibili （一）简介基于yolov8的SAR影像目标…...

编程日记 2025/7/12 13:52:46

【源码】Sharding-JDBC源码分析之SQL中读写分离动态策略、数据库发现规则及DatabaseDiscoverySQLRouter路由的原理

Sharding-JDBC系列 1、Sharding-JDBC分库分表的基本使用 2、Sharding-JDBC分库分表之SpringBoot分片策略 3、Sharding-JDBC分库分表之SpringBoot主从配置 4、SpringBoot集成Sharding-JDBC-5.3.0分库分表 5、SpringBoot集成Sharding-JDBC-5.3.0实现按月动态建表分表 6、【…...

编程日记 2025/7/12 22:02:43

服务器卸载安装的 Node.js

卸载安装的 Node.js 版本，具体步骤取决于你是通过包管理器（如 yum 或 dnf）安装的，还是通过 nvm (Node Version Manager) 安装的。以下是针对这两种情况的指南。通过包管理器卸载 Node.js 如果你是通过 yum 或 dnf 安装的 Node.…...

编程日记 2025/7/12 21:34:21

一键图片提取表格导出为Excel文档工具体验

在日常工作中，我们经常会遇到需要将图片中的表格数据转换为可编辑的Excel文件的情况。这不仅能够提高工作效率，还能减少手动输入数据的错误。本文将介绍一款实用的工具，它能够帮助我们快速实现图片到Excel的转换，同时保持操作的简…...

编程日记 2025/7/12 22:24:22

SpringBoot异常处理

SpringBoot异常处理一、认识异常异常分类： Error: 代表编译和系统错误，不允许捕获Exception: 标准Java库的方法所激发的异常，包含运行异常Runtime_Exception和非运行异常 Non_RuntimeException 的子类Runtime_Exception: 运行时异常。No…...

编程日记 2025/7/12 10:58:42

在 OAuth 2.0 中，refreshToken（刷新令牌）存在的意义

在 OAuth 2.0 中，refreshToken（刷新令牌） 的主要目的是为了提升用户体验和安全性，同时确保访问令牌的有效性。以下是需要使用 refreshToken 的原因： 1. 访问令牌的有限生命周期访问令牌（accessToken&…...

编程日记 2025/7/8 20:58:09

【Redis】壹 —— Redis 介绍

文章目录： 前言一、认识Redis 1. Redis 用途作为数据库作为流引擎二、服务端高并发分布式结构演变 1. 单机架构 2. 应用数据分离架构 3. 应用服务集群架构 4. 读写分离 / 主从分离架构 5. 冷热分离 —— 引入缓存 6. 分库分表 7. 微服务架构 8. …...

编程日记 2025/7/7 21:22:17

【html网页页面010】html+css制作茶品牌文创网页制作含视频元素（7页面附效果及源码）

茶主题品牌文创网页制作 🥤1、写在前面🍧2、涉及知识🌳3、网页效果完整效果(7页)：代码目录结构：page1、主页page2、精品包装page3、茶园一角page4、品牌地带page5、衍生品page6、联X我们page7、视频详情页 &#x1f30…...

编程日记 2025/7/9 11:55:53

【项目实战】基于python+爬虫的电影数据分析及可视化系统

注意：该项目只展示部分功能，如需了解，文末咨询即可。本文目录 1.开发环境2 系统设计 2.1 设计背景2.2 设计内容 3 系统页面展示 3.1 用户页面3.2 后台页面3.3 功能展示视频 4 更多推荐5 部分功能代码 5.1 爬虫代码5.2 电影信息代码 1.开发环…...

编程日记 2025/6/28 19:24:44

K8S命令部署后端（流水线全自动化部署）

前言本文为链接: 云效流水线k8s半自动部署java（保姆级）的补充,本文起初的目的是为了补充完善k8s流水线的全自动化部署,但是也适用于k8s的一键重启,因为使用k8s的web页面容易出现漏点的情况,因此也可以把代码保存为shell脚本,同样可以实现一键重启。关于…...

编程日记 2025/7/12 21:25:08

GPS北斗卫星授时服务器功能是什么？应用是什么？

GPS北斗卫星授时服务器功能是什么？应用是什么？ GPS北斗卫星授时服务器功能是什么？应用是什么？ 摘　要:首先对计算机网络时间同步相关技术进行了介绍,然后阐述了时间同步技术在现代计算机网络中的应用与发展,最后指出时间同步网络…...

编程日记 2025/7/11 20:20:13

学习笔记064——如何手动将jar包导入到maven本地库

文章目录 1、背景：2、方法 1、背景： 有时网络慢的情况， 本地maven库需要导入外部下载的jar包。以便于在项目的pom文件中，直接写dependency写导入依赖。 2、方法在Windows终端中，输入： mvn install:in…...

编程日记 2025/7/12 3:28:23

未来趋势系列篇二：HBM题材解析和股票梳理

文章目录系列文章HBM题材解析环氧塑封电镀液PSPI（光敏性聚酰亚胺）前驱体封装基板其他材料TSV技术封装测试股票梳理系列文章未来趋势系列篇一：AI题材解析和股票梳理 HBM HBM（High Bandwidth Memory，高带宽内存）是一种专为高效能运算设计的新兴高速内存接口技术。它通…...

编程日记 2025/7/10 4:39:33

网卡驱动测试

以下是网卡驱动不同测试类型的具体方法和命令： 1. 功能性测试驱动加载/卸载测试： 方法：加载/卸载网卡驱动，观察日志是否报错。命令： modprobe <driver_name> # 加载驱动 rmmod <driver_name> # 卸载驱动…...

编程日记 2025/7/8 23:27:35

DDR的跨4K问题

参考视频：【深入理解FPGA底层逻辑】、4k边界和outsdanding_哔哩哔哩_bilibili 1、AXI4_FULL突发写一个字节是一个地址， 2、协议规定，把AXI4从机的地址区间从0进行到了4095....每4K进行一次分配所以突发长度的计算如下： 另外AX…...

编程日记 2025/7/9 12:34:09

数据结构---栈（Stack）

1. 简介栈（Stack）是计算机科学中的一种抽象数据类型，它遵循特定的操作顺序，即后进先出（Last In First Out，LIFO）。这意味着最后添加到栈中的元素将是第一个被移除的。栈的基本操作通常包括&am…...

编程日记 2025/7/8 2:00:31

【JavaWeb后端学习笔记】Java上传文件到阿里云对象存储服务

阿里云对象存储 1、创建阿里云对象存储节点2、上传文件2.1 修改项目配置文件2.2 定义一个Properties类获取配置信息2.3 准备一个alioss工具类2.4 创建注册类，将AliOssUtil 注册成Bean2.5 使用AliOssUtil 工具类上传文件2.6 注意事项使用阿里云对象存储服务分为以下…...

编程日记 2025/7/8 22:57:46

Unity3D RPG战斗系统详解

前言设计一个RPG（角色扮演游戏）的战斗系统是游戏开发中的关键环节，它决定了游戏的乐趣和挑战性。在Unity3D中，可以通过多种技术和工具来实现一个功能完善的战斗系统。以下是对RPG战斗系统的技术详解以及代码实现。对惹&#x…...

编程日记 2025/7/8 10:27:52

Spark架构及运行流程

Spark架构图 Driver： 解析用户的应用程序代码，转化为作业(job)。创建SparkContext上下文对象，其负责与资源管理器(ClusterManager)通信，进行资源的申请、任务的分配和监控等。跟踪Executor的执行情况。可通过UI界面查询运行情况。…...

编程日记 2025/7/9 15:03:25

SpringBoot3整合MyBatis

一、MyBatis整合步骤: (1).导入依赖:在Spring Boot项目的构建文件(如pom.xml)中添加MyBatis和数据库驱动的相关依赖。例如，如果使用MySQL数据库，您需要添加MyBatis和MySQL驱动的依赖。 (2).配置数据源:在application.properties或application.yml中配置…...

编程日记 2025/7/10 17:48:57

【计网笔记】习题

物理层不属于物理层接口规范定义范畴的是（C） A. 接口形状 B. 引脚功能 C. 物理地址 D. 信号电平【2023-912】光网络只能通过导向型介质传播。（） 【2017-408】若信道在无噪声情况下的极限数据传输速率不小于信噪比为30dB条件下的…...

编程日记 2025/7/10 23:13:19

力扣56.合并区间

题目描述题目链接56. 合并区间以数组 intervals 表示若干个区间的集合，其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间，并返回一个不重叠的区间数组，该数组需恰好覆盖输入中的所有区间。示例 1： …...

编程日记 2025/7/8 21:45:48

【oracle】大数据删除插入

文章目录引言本文目标 Oracle大数据插入操作插入操作的场景和需求使用并行查询进行数据插入示例代码：创建新表并插入数据解释代码中的关键点性能优化建议 Oracle大数据删除操作删除操作的场景和需求使用游标和批量处理进行数据删除示例代码：批量删除数…...

编程日记 2025/7/9 13:20:41

mysql 双1设置

MySQL 的"双1"设置通常指的是两个配置参数：innodb_flush_log_at_trx_commit 和 sync_binlog。这两个参数都与 MySQL 的数据安全和性能有关。 innodb_flush_log_at_trx_commit：这个参数控制了 InnoDB 引擎中事务日志的刷新频率。它有三个可能的…...

编程日记 2025/7/7 12:05:15

《C++ 赋能 K-Means 聚类算法：开启智能数据分类之旅》

在当今数字化浪潮汹涌澎湃的时代，人工智能无疑是引领科技变革的核心驱动力之一。而在人工智能的广袤天地中，数据分类与聚类作为挖掘数据内在价值、揭示数据潜在规律的关键技术手段，正发挥着前所未有的重要作用。K-Means 聚类算法，…...

编程日记 2025/7/11 11:18:49

用Python开发一个经典贪吃蛇小游戏

Python 是开发小游戏的绝佳工具，借助第三方库，如 pygame，我们可以快速开发一个经典的贪吃蛇游戏。本篇将介绍如何用 Python 实现一个完整的贪吃蛇小游戏。一、游戏设计 1.1 游戏规则玩家通过方向键控制贪吃蛇移动。贪吃蛇吃到食物后会变长，同时得分增加。如果贪吃蛇撞到…...

编程日记 2025/7/8 16:54:52

《大宋豪侠传》客户端源码 + 服务端源码 + 工具源码 + 资源，大小16.3G

《大宋豪侠传》客户端源码服务端源码工具源码资源，大小16.3G 下载地址： 通过网盘分享的文件：【源码】《大宋豪侠传》客户端源码服务端源码工具源码资源，大小16.3G 链接: https://pan.baidu.com/s/1lUf84LzXKB3iM7L-1P…...

编程日记 2025/7/7 9:51:17

使用vue-seamless-scroll实现echarts图表大屏滚动，出现空白间隔的解决方案

一、背景介绍最近的业务开发需求，想要实现echarts图表大屏滚动，小编首先采用vue-seamless-scroll进行实现，结果发现第二屏出现空白间隔，尝试了多种解决方案均不生效，最终选择换一个方案。二、封装的ScrollList组件…...

编程日记 2025/7/8 20:10:25

zsh配置

zsh配置 https://zhuanlan.zhihu.com/p/58073103 $ cat .zshrc If you come from bash you might have to change your $PATH. export PATH H O M E / b i n : / u s r / l o c a l / b i n : HOME/bin:/usr/local/bin: HOME/bin:/usr/local/bin:PATH Path to your oh-my-zs…...

编程日记 2025/7/10 22:09:16

首先看下 requestIdleCallback是什么？

React 中不直接使用 requestIdleCallback 的原因涉及多个方面

番外篇

相关文章：

首先看下 `requestIdleCallback`是什么？

`React` 中不直接使用 `requestIdleCallback` 的原因涉及多个方面