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

requestAnimationFrame和requestIdleCallback分别是什么，是用在什么场景下

news 来源：原创 2025/7/20 14:42:09

深入解析 `requestAnimationFrame` 和 `requestIdleCallback`

requestAnimationFrame (rAF) 和 requestIdleCallback (rIC) 都是浏览器提供的 异步调度 API，但它们的执行时机和用途完全不同。

API	主要用途	何时执行	是否保证执行	适合场景
`requestAnimationFrame`	高优先级 UI 更新	下一帧渲染前（通常 16.67ms 内）	✅ 一定执行（下一帧到来时）	动画、滚动、WebSocket 实时数据可视化
`requestIdleCallback`	低优先级任务	浏览器空闲时（时间不确定）	❌ 不一定执行（如果浏览器一直忙）	预加载、日志统计、AI 计算、非关键数据处理

1. `requestAnimationFrame (rAF)`：下一帧渲染前执行

🔹 工作原理

浏览器的 渲染帧率 一般是 60Hz，即 每 16.67ms 需要完成一次绘制（包括 JS 计算、样式计算、布局、绘制等）。

requestAnimationFrame 会在下一帧开始前执行，保证代码在下一帧渲染前完成，不会阻塞 UI。
适用于 高频 UI 更新，比如：
- CSS 动画
- 页面滚动
- WebSocket 高频推送的数据可视化
- Canvas 绘图

🔹 示例 1：流畅动画

let box = document.getElementById("box");
let position = 0;function move() {position += 5;box.style.transform = `translateX(${position}px)`;if (position < 300) {requestAnimationFrame(move); // 递归调用，持续更新}
}requestAnimationFrame(move);

✅ 为什么使用 `requestAnimationFrame`？

不卡顿：会在合适的时间点执行，不会阻塞主线程。
不影响页面性能：浏览器空闲时自动暂停，节省资源。

🔹 示例 2：WebSocket 高频推送数据

let pending = false;socket.onmessage = (event) => {const data = JSON.parse(event.data);if (!pending) {pending = true;requestAnimationFrame(() => {updateUI(data);pending = false;});}
};function updateUI(data) {document.getElementById("output").innerText = JSON.stringify(data);
}

📌 避免 UI 频繁更新，导致卡顿

如果 WebSocket 每 1ms 推送一次数据，直接更新 DOM 会让页面卡死。
使用 requestAnimationFrame 让 UI 更新保持在 60FPS 以内，保证流畅度。

🔹 示例 3：滚动优化

监听 scroll 事件时，直接操作 DOM 可能导致页面卡顿，应该用 requestAnimationFrame 优化：

let ticking = false;window.addEventListener("scroll", () => {if (!ticking) {requestAnimationFrame(() => {updateScrollPosition(window.scrollY);ticking = false;});ticking = true;}
});function updateScrollPosition(scrollY) {document.getElementById("position").innerText = scrollY;
}

📌 好处：避免 scroll 事件触发过于频繁，优化滚动时的 UI 更新。

2. `requestIdleCallback (rIC)`：浏览器空闲时执行

🔹 工作原理

requestIdleCallback 让浏览器在 主线程空闲时 执行低优先级任务。
执行时间不固定，取决于浏览器的空闲情况：
- 如果用户在快速滚动，可能不会触发 requestIdleCallback。
- 如果 CPU 负载高，可能很久都不会执行。

🔹 示例 1：处理后台任务

function heavyTask(deadline) {while (deadline.timeRemaining() > 0) {console.log("执行低优先级任务...");}requestIdleCallback(heavyTask);
}requestIdleCallback(heavyTask);

📌 deadline.timeRemaining() 返回本次空闲时间的剩余毫秒数，避免影响 UI 交互。

🔹 示例 2：懒加载数据

当页面加载完毕后，在空闲时间预加载一些不重要的数据：

requestIdleCallback(() => {fetch("/api/data").then(res => res.json()).then(data => {console.log("预加载数据完成:", data);});
});

📌 好处：不影响页面主线程，提高用户体验。

🔹 示例 3：日志上报

requestIdleCallback(() => {sendAnalyticsData();
});

📌 好处：浏览器空闲时再上传日志，避免影响用户体验。

3. `requestAnimationFrame` vs `requestIdleCallback`：何时用哪一个？

场景	用 `requestAnimationFrame`	用 `requestIdleCallback`
动画	✅ 需要流畅动画	❌ 不能保证执行时间
高频 WebSocket 数据	✅ 控制 UI 更新频率	❌ 可能无法及时更新
页面滚动	✅ 监听 `scroll` 事件	❌ 不能保证执行时机
后台任务（日志、数据计算）	❌ 影响 UI 体验	✅ 浏览器空闲时执行
预加载数据	❌ 影响用户交互	✅ 在用户空闲时加载
AI 计算	❌ 主线程压力大	✅ 只有空闲时才执行

4. 如何组合使用？

🔹 WebSocket 高速数据流 + UI 更新优化

let pending = false;
let backgroundData = [];socket.onmessage = (event) => {const data = JSON.parse(event.data);backgroundData.push(data);// 让 UI 更新不超过 60FPSif (!pending) {pending = true;requestAnimationFrame(() => {updateUI(backgroundData);backgroundData = [];pending = false;});}// 在浏览器空闲时处理日志requestIdleCallback(() => {processLogs(backgroundData);});
};function updateUI(data) {console.log("更新 UI", data);
}function processLogs(data) {console.log("后台处理数据", data);
}

📌 优化点：

requestAnimationFrame 让 UI 更新流畅，不会因 WebSocket 高频推送导致页面卡死。
requestIdleCallback 在浏览器空闲时处理日志，避免影响 UI 渲染。

5. 总结

requestAnimationFrame：UI 渲染优化，适用于 动画、滚动、WebSocket UI 更新。
requestIdleCallback：后台任务调度，适用于 日志、预加载、AI 计算。
两者结合使用，可以优化高性能应用，提升页面流畅度和用户体验！ 🚀

requestAnimationFrame和requestIdleCallback分别是什么，是用在什么场景下

深入解析 requestAnimationFrame 和 requestIdleCallback requestAnimationFrame (rAF) 和 requestIdleCallback (rIC) 都是浏览器提供的异步调度 API，但它们的执行时机和用途完全不同。 API主要用途何时执行是否保证执行适合场景requestAnimationFrame高优先级 U…...

编程日记 2025/7/20 14:42:09

SAP-ABAP：SAP BW模块架构与实战应用详解

SAP BW模块架构与实战应用详解目录导航核心架构分层设计数据建模关键技术典型行业应用场景BW/4HANA革新特性实施路线图常见问题解决方案学习资源推荐一、核心架构分层设计 1. 数据仓库层（Data Warehousing Layer）组件功能说明典型对象🔄 ETL引擎数据抽取、转换、加载Da…...

编程日记 2025/7/14 19:34:59

准确--配置服务器文件数

某些系统可能在 /etc/security/limits.d/ 目录下有额外配置覆盖全局设置。检查是否存在冲突文件： ls /etc/security/limits.d/如果有文件（如 90-nproc.conf 或 90-nofile.conf），需编辑或删除这些文件中的冲突配置。确保系统启用…...

编程日记 2025/7/16 5:20:41

揭秘大数据 | 12、大数据的五大问题之大数据管理与大数据分析

书接上文，老夫讲到规划大数据战略、构建大数据的解决方案与体系架构、解决大数据问题及大数据发展历程中通常会依次涉及到大数据存储、大数据管理、大数据分析、数据科学、大数据应用这五大问题。上篇内容主要围绕的是大数据存储，今天主要聊一下大数据管…...

编程日记 2025/7/15 18:51:39

Java操作RabbitMQ

文章目录 Spring集成RabbitMQ1. AMQP&SpringAMQP2. SpringBoot集成RabbitMQ3. 模型work模型 4.交换机Fanout交换机Direct交换机Topic交换机 5.声明式队列和交换机基于API声明基于注解声明 6.消息转换器 Spring集成RabbitMQ 1. AMQP&SpringAMQP AMQP（高级消…...

编程日记 2025/7/11 14:24:20

【MySQL】实战篇—项目需求分析：ER图的绘制与关系模型设计

在软件开发中，数据库是信息系统的核心部分，合理的数据库设计能够显著提高系统的性能和可维护性。 ER图（实体-关系图）是数据库设计的重要工具，它通过图形化的方式描述了数据实体及其相互关系，帮助开发者和设…...

编程日记 2025/7/16 12:44:16

Apache Shiro 统一化实现多端登录（PC端移动端）

Apache Shiro 是一个强大且易用的Java安全框架，提供了身份验证、授权、密码学和会话管理等功能。它被广泛用于保护各种类型的应用程序，包括Web应用、桌面应用、RESTful服务、移动端应用和大型企业级应用。需求背景在当今数字化浪潮的推动下&#xff…...

编程日记 2025/7/19 1:12:20

es新增运算符

?? ( 空值合并运算符) ?. (可选链式运算符) ?? (空值合并赋值操作符) // ?? ( 空值合并运算符)：这个运算符主要是左侧为null和undefined，直接返回右侧值 let result value ?? 默认值;. ??（空值合并运算符） ✅ 用于…...

编程日记 2025/7/17 5:00:41

数据库三级填空+应用（2）

sysadmin、dbcreator 数据是面向主题的（2）、集成的、非易失的、随时间不断变化的数据集合， 数据字典【答案】完整性约束数据模型成分 33【解析】顺序图主要用于描述系统内对象之间的消息发送和接收序列。 34如果把舍弃的元组也保存在结果关…...

编程日记 2025/7/16 23:09:25

贪心算法经典应用：最优答疑调度策略详解与Python实现

目录引言：从现实场景到算法设计一、问题背景与数学建模 1.1 现实场景抽象 1.2 时间线分析二、贪心策略的数学证明与选择依据 2.1 贪心选择性质 2.2 证明过程三、算法实现与代码解析 3.1 算法步骤分解 3.2 代码亮点解析四、测试案例与结果验证 4.1 …...

编程日记 2025/7/19 15:27:56

把手搭建vue前后端管理系统-TAB标签通过pinia来进行管理（二十六）

目标：通过pinia的store来进行组件状态的统一管理，这样大家都可以共用到这个组件的状态信息，就可以实现组件的联动一、添加侧边栏菜单的点击事件： 1、CommonAside.vue里面添加click的事件 <el-menu-itemv-for"item in …...

编程日记 2025/7/14 8:47:57

Python与数据库

目录一、数据库 1、数据库的概念 2、数据库的表 3、字段详解二、SQL数据库语句 1、了解SQL命令 2、CREATE命令 3、INSERT命令三、数据库和SQL命令四、数据库的查询与修改 1、SELECT命令 2、UPDATE命令 3、DELETE命令 4、DROP TABLE 5、SQL的注意事项五、处…...

编程日记 2025/7/20 7:24:43

MyBatis中mapper.xml 的sql映射规则

一、SQL 映射文件核心元素 MyBatis 映射文件的顶级元素（按定义顺序）： cache：命名空间的缓存配置。cache-ref：引用其他命名空间的缓存。resultMap：自定义结果集映射。sql：可重用的 SQL 片段。i…...

编程日记 2025/7/18 11:14:06

ubuntu22.04安装搜狗输入法保姆教程~

一、添加中文语言支持 1.首先打开设置，找到Language and Region 2.点击Manage Installed Languages 3.点击 Install/Remove Languages... 4.选中Chinese (simplified)，点击Apply...

编程日记 2025/6/28 3:21:52

Jenkins 配置python项目和allure

Jenkins新建项目新建ry-api-auto-test。添加项目描述，选择gitee令牌。源码管理，设置仓库地址和凭证。参考我上一篇文章的链接：配置gitee私人令牌和凭证构建步骤，因为我Jenkins部署在Windows，因此选择batch。…...

编程日记 2025/7/20 12:53:14

keda基于postgresql伸缩dify-api服务

1 概述 dify-api使用postgresql来存储数据，在dify控制台每新建一个聊天机器的聊天框，就会在conversations表里新插入一条记录，并且不断地更新字段updated_at，示例如下： dify# select * from conversations limit 1; …...

编程日记 2025/7/17 1:15:56

蓝桥杯拼正方形

问题描述小蓝正在玩拼图游戏。他有： 7385137888721 个 22 的方块10470245 个 11 的方块他需要从中挑出一些方块来拼出一个正方形。例如： 用 3 个 22 和 4 个 11 方块可以拼出一个 44 的正方形；用 9 个 22 方块可以拼出一个 66 的正方…...

编程日记 2025/7/18 7:13:05

failed to load steamui.dll”错误：Steam用户的高频崩溃问题解析

当你满心欢喜地双击 Steam 图标，准备进入游戏世界时，屏幕上突然弹出 “failed to load steamui.dll” 的刺眼提示——这是全球数百万 Steam 用户最不愿见到的错误之一。作为 Steam 客户端的核心界面动态链接库文件，steamui.dll 的缺失或损坏会…...

编程日记 2025/7/16 21:05:02

Django之旅：第六节--mysql数据库操作增删改查（二）

前提条件(models.py已经设置好）： from django.db import mmodelsclass UserInfo(models.Model):namemodels.CharFIeld(max_length32)passwordmodels.CharFIeld(max_length64)#agemodels.IntegerFIeld()操作数据语法（在views.py文件&#xff0…...

编程日记 2025/7/14 9:31:40

6. 使用VUE实现前端页面的分级嵌套

1. 说明在UI设计中，页面中有些部分的占用空间位置是固定不动，有些部分的区域是根据情况进行动态切换的。比如，一个网页的菜单栏和主题内容展示，往往菜单栏区域的导航按钮占用的空间是固定不动的，当用户点击不同按钮时…...

编程日记 2025/7/15 11:30:00

（UI自动化测试web端）第三篇：元素的常用操作方法_浏览器操作

模拟浏览器的常见操作。 1、最大化浏览器窗口 driver.maximize_window()2、浏览器后退、前进、刷新、关闭、退出 # 调用浏览器的后退 driver.back() # 调用浏览器的前进 driver.forward() # 刷新页面 driver.refresh() # 关闭当前窗口 driver.close() # 退出浏览器 driver.q…...

编程日记 2025/7/17 19:56:31

Ubuntu软件包离线下载安装

1、下载软件包tcpd，并在/var/cache/apt/archives目录中查看。 rooteducoder:~# apt-get install -d tcpd Reading package lists... Done Building dependency tree Reading state information... Done The following NEW packages will be installed:tcpd …...

编程日记 2025/7/16 23:09:19

第十节 MATLAB逻辑运算

MATLAB逻辑运算都是针对元素的操作，运算结果是特殊的逻辑数组；在逻辑分析时，逻辑（真）用1表示，逻辑假用0表示，逻辑运算中所有的非零元素作为1处理。注意： 使用MATLAB逻辑运算时的语…...

编程日记 2025/7/13 20:44:01

初识哈希表

一、题意给定一个整数数组 nums 和一个目标值 target，要求你在数组中找出和为目标值的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。示例： 给定 nums [2, 7, …...

编程日记 2025/7/17 8:04:13

Ajax与Axios，以及Apifox的入门使用

Ajax与Axios，以及Apifox的入门使用作者：blue 时间：2025.3.20 文章目录 Ajax与Axios，以及Apifox的入门使用1.Ajax2.Axios3.Apifox的基本使用内容Path 参数定义语法用途 Query 参数定义语法用途 1.Ajax 概念：Asynchr…...

编程日记 2025/7/16 12:09:03

jmm-java内存模型

java内存模型----底层原理底层原理从Java代码到最终执行的CPU指令的流程： 最开始，我们编写的Java代码，是*.java文件在编译（javac命令）后，从刚才的*.java文件会变出一个新的Java字节码文件（…...

编程日记 2025/7/17 7:46:37

机器学习——KNN数据均一化

在KNN（K-近邻）算法中，数据均一化（归一化）是预处理的关键步骤，用于消除不同特征量纲差异对距离计算的影响。以下是两种常用的归一化操作及其核心要点： 质押一、主要思想 1. 最值归一化&#…...

编程日记 2025/7/11 1:11:51

页面元素内容太长，给元素添加title

一、需求页面元素内容太长，给元素添加title 二、实现 1、直接使用title属性 <div target"_blank" class"text-overflow" title"叉车司机">叉车司机</div> 2、使用tdesign的Popup 弹出层 <t-popup>触发元素&…...

编程日记 2025/7/16 23:14:36

【Git多分支使用教程】

Git多分支使用教程 Git多分支使用手册目录多分支只拉取一个多分支拉取指定几个步骤 1：克隆第一个分支步骤 2：获取其他分支常见问题与解决方法1. 错误：origin/分支名 is not a commit2. 分支名称冲突3. --single-branch 限制总结 Git多分支使…...

编程日记 2025/7/18 21:41:03

【408--复习笔记】数据结构

【408--复习笔记】数据结构 1.绪论数据结构基本概念• 请简述数据结构的定义。• 数据结构中数据、数据元素、数据项、数据对象的区别是什么？ 算法相关• 什么是算法？算法的五个重要特性是什么？• 如何理解算法的时间复杂度和空间复杂度&…...

编程日记 2025/7/15 11:13:07

使用 Vite 提升前端开发体验：入门与配置指南

在现代前端开发中，构建工具的选择对开发效率和项目性能有着至关重要的影响。Vite 是一个新兴的前端构建工具，由 Vue.js 的作者尤雨溪开发，旨在通过利用现代浏览器的原生 ES 模块特性，提供更快的开发服务器启动速度和更高效的热更新…...

编程日记 2025/7/16 19:53:59

WPS JS宏编程教程（从基础到进阶）--第二部分：WPS对象模型与核心操作

第二部分：WPS对象模型与核心操作 WPS对象的属性、方法、集合工作簿对象常用表达方式工作表对象常用表达方式单元格对象常用表达方式单元格操作实战单元格复制与重定位单元格偏移与尺寸调整颜色设置专题索引颜色与RGB颜色按条件动态设置单元格颜色第二部分&…...

编程日记 2025/7/15 7:01:07

瑞数信息《BOTS自动化威胁报告》正式发布

在数字化时代，BOTS自动化攻击如同一场无声的风暴，正以前所未有的态势席卷全球网络空间。为了让各行业更好地应对自动化威胁挑战，瑞数信息作为BOTS自动化攻击防护领域的专业厂商，多年来持续输出BOTS自动化威胁报告，为各…...

编程日记 2025/7/1 5:09:59

【NUUO 摄像头】(弱口令登录漏洞)

漏洞简介：NUUO 是NUUO公司的一款小型网络硬盘录像机设备。 NUUO NVRMini2 3.0.8及之前版本中存在后门调试文件。远程攻击者可通过向后门文件handle_site_config.php发送特定的请求利用该漏洞执行任意命令。 1.Fofa搜索语句： 在Fofa网站，搜索&…...

编程日记 2025/7/20 11:27:33

Android系统的安全问题 - Linux的能力模型（Capability）和 SELinux 的区别

Linux 的能力模型（Capabilities）和 SELinux 是两种不同的安全机制，虽然它们都用于增强 Linux 系统的安全性，但它们的实现方式和目标有所不同。 1. Linux Capabilities（能力模型） 作用：传统的 …...

编程日记 2025/7/16 19:03:51

Rust安装并配置配置vscode编译器

一. 下载rustup-init.exe rust下载网址：Getting started - Rust Programming Language 根据系统，选择适合的exe文件我选择的的是右边64bit的打开下载的文件输入1，回车二. Visual C 安装自动下载安装vs 等待安装完毕三. Rust 安装…...

编程日记 2025/7/18 12:50:04

Spring Boot响应压缩配置与优化

一、核心工作机制 1.1 自动协商触发条件 Spring Boot的响应压缩功能基于智能协商机制，需同时满足以下条件方可触发： 客户端支持：请求头包含Accept-Encoding: gzip/deflate数据量阈值：响应体大小超过预设值（默认2KB&…...

编程日记 2025/7/16 7:18:09

el-select开启filterable模式，限制输入框输入类型

遇到el-select开启filterable模式查询，下拉框内容是文字与数字组合版，导致校验不准，且没有属性能直接限制focus输入的内容，这时候可以用自定义属性来解决实例：（以只能输入数字为例） <el-for…...

编程日记 2025/7/19 4:36:51

创建login.api.js步骤和方法

依次创建 login.api.js、home.api.js...... login.api.js、home.api.js 差不多导入到 main.js main.js 项目中使用...

编程日记 2025/6/28 6:27:42

在线运行vscode

安装 https://github.com/coder/code-server?utm_sourcesyndication&pubDate20250317 运行前预览脚本 curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run运行脚本 curl -fsSL https://code-server.dev/install.sh | sh其他可以通过后台服务运行&am…...

编程日记 2025/7/17 21:42:47

【Nginx】可以做哪些优化？

一、配置文件优化 1.1 性能优化开启网页压缩 gzip on;设置网页缓存时间expires 缓存时间;设置连接保持超时keepalive_timeout 服务端超时时间客户端超时时间;设置连接保持最大请求数keepalive_requests设置工作进程数 worker_processes 与服务器CPU数量…...

编程日记 2025/7/15 5:13:11

springboot在feign和线程池中使用TraceId日志链路追踪(最终版)-2

文章目录简述问题feign调用时给head加入traceIdFeignConfig配置FeignConfig 局部生效feign拦截器和配置合并为一个文件（最终版）feign异步调用拦截器配置[不常用] 使用TTL自定义线程池为什么需要TransmittableThreadLocal？ 总结参考和拓展阅读…...

编程日记 2025/7/19 13:57:34

datawhale组队学习-大语言模型-task5：主流模型架构及新型架构

目录 5.3 主流架构 5.3.1 编码器-解码器架构 5.3.2 因果解码器架构 5.3.3 前缀解码器架构 5.4 长上下文模型 5.4.1 扩展位置编码 5.4.2 调整上下文窗口 5.4.3 长文本数据 5.5 新型模型架构 5.5.1 参数化状态空间模型 5.5.2 状态空间模型变种 5.3 主流架构在预训…...

编程日记 2025/7/17 8:46:11

《Matplotlib三维可视化工业实践——从分子模拟到流体力学》

目录编辑一、工业三维可视化挑战 1.1 典型工业场景需求 1.2 技术痛点分析二、Matplotlib三维可视化基础 2.1 三维坐标体系构建 2.2 核心三维绘图API 三、分子模拟可视化实战 3.1 晶体结构渲染 3.2 分子轨迹动态演示四、流体力学场数据优化渲染 4.1 矢量场高效…...

编程日记 2025/7/16 6:21:22

【neo4j数据导出并在其他电脑导入】

停止服务 neo4j stop 导出 neo4j-admin database dump neo4j --to-path"C:\Users\12901\Downloads\test folder" 导入将 .dump 文件放在一个目录中 mkdir /root/dump-directory mv /root/neo4j.dump /root/dump-directory/ 使用包含 .dump 文件的目录路径作为 …...

编程日记 2025/7/20 5:39:59