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

使用requestAnimationFrame减少浏览器重绘

article 2026/4/30 15:42:13

文章目录

  • 介绍
  • 使用
    • 使用rAF前
    • 使用rAF后

介绍

  • 在屏幕中，浏览器通常都以60FPS（1/60 s）每帧更新屏幕，但是当前端绑定了一些高频事件，如鼠标移动，屏幕滚动、触摸滑动等时，在一帧的周期内，事件会多次触发，但页面只刷新一次。这种情况就可能导致丢帧现象，抑或者回调函数处理时间过长，也会导致下一帧的重绘延迟，出现卡顿效果。
  • 通过requestAnimationFrame（rAF）保证在一帧的周期内，函数只触发一次然后渲染，就能有效的降低卡顿。

使用

记录一个标志变量判断是否有正在进行的rAM，若有，停止触发绑定事件；否则将标志置为true，在rAM周期内执行回调函数，执行完成后将标志变量置为false

使用rAF前

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>webgl</title><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>body {margin: 0;padding: 0;}#img1 {width: 100px;height: 100px;background-image: url('./img/img1.jpg');background-repeat: no-repeat;background-size: 100% 100%;}#img2 {width: 100px;height: 100px;background-image: url('./img/img2.jpg');background-repeat: no-repeat;background-size: 100% 100%;}#img3 {width: 100px;height: 100px;background-image: url('./img/img1.jpg');background-repeat: no-repeat;background-size: 100% 100%;}</style>
</head><body><div id="main"><div class="img" id="img1"> </div><div class="img" id="img2"> </div><div class="img" id="img2"> </div></div><script>let imgDiv = document.getElementsByClassName('img')let flag = false// 重绘操作function rePaint (pos) {for(let i = 0; i<imgDiv.length; i++) {imgDiv[i].style.width = (Math.sin(pos/1000) + Math.PI / 2) * 100 + 'px'imgDiv[i].style.height = (Math.sin(pos/1000) + Math.PI / 2) * 100 + 'px'}}// 高频触发函数, window.addEventListener('pointermove',(e)=>{rePaint(pos)	})</script>
</body></html>

使用rAF后

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>webgl</title><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>body {margin: 0;padding: 0;}#img1 {width: 100px;height: 100px;background-image: url('./img/img1.jpg');background-repeat: no-repeat;background-size: 100% 100%;}#img2 {width: 100px;height: 100px;background-image: url('./img/img2.jpg');background-repeat: no-repeat;background-size: 100% 100%;}#img3 {width: 100px;height: 100px;background-image: url('./img/img1.jpg');background-repeat: no-repeat;background-size: 100% 100%;}</style>
</head><body><div id="main"><div class="img" id="img1"> </div><div class="img" id="img2"> </div><div class="img" id="img2"> </div></div><script>let imgDiv = document.getElementsByClassName('img')let flag = false// 重绘操作function rePaint (pos) {for(let i = 0; i<imgDiv.length; i++) {imgDiv[i].style.width = (Math.sin(pos/1000) + Math.PI / 2) * 100 + 'px'imgDiv[i].style.height = (Math.sin(pos/1000) + Math.PI / 2) * 100 + 'px'}}// 高频触发函数, window.addEventListener('pointermove',(e)=>{let pos = e.clientX;// 判断，如果有一个正在进行的rAM，停止继续触发；否则将flag置为trueif(flag) return;flag = true;window.requestAnimationFrame(()=>{// 此帧执行结束后，将flag重新置为falserePaint(pos)flag = false;})		})</script>
</body></html>

相关文章：

使用requestAnimationFrame减少浏览器重绘

文章目录 介绍使用使用rAF前使用rAF后 介绍 在屏幕中&#xff0c;浏览器通常都以60FPS&#xff08;1/60 s&#xff09;每帧更新屏幕&#xff0c;但是当前端绑定了一些高频事件&#xff0c;如鼠标移动&#xff0c;屏幕滚动、触摸滑动等时&#xff0c;在一帧的周期内&#xff0c;…...

编程日记 2025/5/28 18:27:45

autMan奥特曼机器人-对接deepseek教程

一、安装插件ChatGPT 符合openai api协议的大模型均可使用此插件&#xff0c;包括chatgpt-4/chatgpt-3.5-turbo&#xff0c;可自定义服务地址和模型&#xff0c;指令&#xff1a;gpt&#xff0c;要求Python3.7以上&#xff0c;使用官方库https://github.com/openai/openai-pyt…...

编程日记 2026/4/26 11:54:22

一个精简完整的全栈电商平台采用现代化技术栈和安全架构

以下是一个精简但完整的全栈电商平台实现，采用现代化技术栈和安全架构： 架构设计 前端：SvelteKit + TypeScript (SSR/SSG) 后端：Go 1.21 + Fiber框架 数据库：MySQL 8.0 + Redis 7.0 安全：Cloudflare WAF + JWT+HTTPOnly+Secure Cookie 部署：Docker Swarm + Traefik (自…...

编程日记 2026/1/3 13:23:24

数据分析：企业数字化转型的金钥匙

引言&#xff1a;数字化浪潮下的数据金矿 在数字化浪潮席卷全球的背景下&#xff0c;有研究表明&#xff0c;只有不到30%的企业能够充分利用手中掌握的数据&#xff0c;这是否让人深思&#xff1f;数据已然成为企业最为宝贵的资产之一。然而&#xff0c;企业是否真正准备好从数…...

编程日记 2026/4/29 4:38:22

MySQL中datetime类型23:59:59变成下一天的00:00:00

1. 现象 公司项目中有一个统计的业务需求&#xff0c;需要记录数据的开始和结束时间点&#xff0c;对应的是MySQL表中的datetime类型。结束时间是当天的23:59:59&#xff0c;但是java程序中是对的时间&#xff0c;但是Mybatis-plus入库了之后查看数据库却变成第二天的00:00:00&…...

编程日记 2026/2/23 0:22:43

玩转Docker | 使用Docker部署httpd服务

玩转Docker | 使用Docker部署httpd服务 前言一、准备工作环境确认检查操作系统准备网站目录和配置文件二、拉取httpd镜像三、运行httpd容器运行容器命令检查容器状态四、验证httpd服务浏览器访问测试错误排查五、容器管理与维护查看容器状态停止和启动容器更新网站内容和配置六…...

编程日记 2026/4/28 1:54:04

Vue 双向数据绑定的原理

Vue 的双向数据绑定是其核心特性之一&#xff0c;它可以让视图与数据保持同步&#xff0c;简化了开发者在 DOM 操作上的工作。Vue 的双向数据绑定通过 响应式系统 和 DOM 事件监听 来实现&#xff0c;当数据发生变化时&#xff0c;视图会自动更新&#xff1b;当视图中的元素&am…...

编程日记 2025/3/16 7:20:37

Spring Web MVC项目的创建及使用

一、什么是Spring Web MVC&#xff1f; Spring Web MVC 是基于 Servlet API 构建的原始 Web 框架&#xff0c;从⼀开始就包含在 Spring 框架中&#xff0c;通常被称为Spring MVC。 1.1 MVC的定义 MVC 是 Model View Controller 的缩写&#xff0c;它是软件工程中的一种软件架构…...

编程日记 2026/4/26 11:53:46

32.日常算法

1.最大子数组和 题目来源 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。子数组是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,…...

编程日记 2026/4/27 22:40:46

MySQL的底层原理与架构

前言 了解MySQL的架构和原理对于很多的后续很多的操作会有很大的帮助与理解。并且很多知识都与底层架构相关联。 了解MySQL架构 通过上面的架构图可以得知&#xff0c;Server层中主要由 连接器、查询缓存、解析器/分析器、优化器、执行器 几部分组成的&#xff0c;下面将主要…...

编程日记 2026/4/26 11:54:15

python Excel 表读取合并单元格以及清除空格符

读取合并单元格并保留合并信息 读取合并单元格并保留合并信息清除各单元格的空格和换行符&#xff0c;并去除列名中的空格和换行符 读取合并单元格并保留合并信息 当我们只是使用 pandas 的 read_excel 方法读取 Excel 文件时&#xff0c;我们可能会遇到一个很棘手的问题&…...

编程日记 2026/2/22 6:27:44

Node.js 实现简单爬虫

介绍 爬虫是一种按照一定的规则&#xff0c;自动地抓取万维网信息的程序或者脚本。 本文将使用 Nodejs 编写一个简单的爬虫脚本&#xff0c;爬取一个美食网站&#xff0c;获取菜品的标题和图片链接&#xff0c;并以表格的形式输出。 准备工作 1、初始化项目 首先&#xff0…...

编程日记 2026/4/26 11:53:43

【Pytorch】nn.RNN、nn.LSTM 和 nn.GRU的输入和输出形状

nn.RNN、nn.LSTM 和 nn.GRU的输入和输出形状 输入形状通用输入参数特殊情况&#xff08;LSTM&#xff09; 输出形状nn.RNN 和 nn.GRUnn.LSTM 代码示例 输入形状 通用输入参数 这三个模块通常接收以下两种形式的输入&#xff1a; 输入序列&#xff1a;形状为 (seq_len, batch…...

编程日记 2025/11/29 5:11:19

代码随想录算法训练营第三十一天| 回溯算法04

491. 递增子序列 题目&#xff1a; 代码随想录 视频讲解&#xff1a;回溯算法精讲&#xff0c;树层去重与树枝去重 | LeetCode&#xff1a;491.递增子序列_哔哩哔哩_bilibili 这题需要注意的点&#xff1a; 1. path长度在2以上才放入最终结果 2. 需要记录已经使用过的数字&am…...

编程日记 2025/5/31 22:53:51

2024.1版android studio创建Java语言项目+上传gitee

1.在gitee上创建仓库 Gitee 创建仓库并邀请成员指南_gitee创建仓库邀请成员-CSDN博客 见1 2.新建android studio项目 3.在Android studio配置gitee Android Studio提交代码到gitee仓库_android log in to gitee-CSDN博客 其中的一二步 p.s.添加gitee账户选择password时&a…...

编程日记 2026/4/26 11:54:31

React 打印插件 -- react-to-print

一、安装依赖 npm install react-to-print 二、使用 import { useReactToPrint } from "react-to-print"; import React, { useRef, forwardRef } from react;const Content () > {const contentRef useRef(null);const reactToPrintFn useReactToPrint({ c…...

编程日记 2026/2/12 8:17:36

opentelemetry-collector 配置elasticsearch

一、修改otelcol-config.yaml receivers:otlp:protocols:grpc:endpoint: 0.0.0.0:4317http:endpoint: 0.0.0.0:4318 exporters:debug:verbosity: detailedotlp/jaeger: # Jaeger supports OTLP directlyendpoint: 192.168.31.161:4317tls:insecure: trueotlphttp/prometheus: …...

编程日记 2026/4/26 11:53:44

SQL Server 数据库迁移到 MySQL 的完整指南

文章目录 引言一、迁移前的准备工作1.1 确定迁移范围1.2 评估兼容性1.3 备份数据 二、迁移工具的选择2.1 使用 MySQL Workbench2.2 使用第三方工具2.3 手动迁移 三、迁移步骤3.1 导出 SQL Server 数据库结构3.2 转换数据类型和语法3.3 导入 MySQL 数据库3.4 迁移数据3.5 迁移存…...

编程日记 2026/4/26 11:53:43

C# SQlite使用流程

前言 不是 MySQL 用不起&#xff0c;而是 SQLite 更有性价比&#xff0c;绝大多数的应用 SQLite 都可以满足。 SQLite 是一个用 C 语言编写的开源、轻量级、快速、独立且高可靠性的 SQL 数据库引擎&#xff0c;它提供了功能齐全的数据库解决方案。SQLite 几乎可以在所有的手机…...

编程日记 2026/4/24 22:17:45

MySQL数据库 （三）- 函数/约束/多表查询/事务

目录 一 函数 (一 字符串函数 (二 数值函数 (三 日期函数 (四 流程函数 二 约束 (一 概述 (二 约束演示 (三 外键约束 三 多表查询 (一 多表关系 1 一对多&#xff08;多对一&#xff09; 2 多对多 3 一对一 (二 多表查询概述 (三 内连接 1 查询语法 2 代码实…...

编程日记 2026/4/26 6:06:17

【玩转 Postman 接口测试与开发2_018】第14章：利用 Postman 初探 API 安全测试

《API Testing and Development with Postman》最新第二版封面 文章目录 第十四章 API 安全测试1 OWASP API 安全清单1.1 相关背景1.2 OWASP API 安全清单1.3 认证与授权1.4 破防的对象级授权&#xff08;Broken object-level authorization&#xff09;1.5 破防的属性级授权&a…...

编程日记 2026/4/26 7:11:41

攻防世界baigeiRSA

打开题目附件 import libnum from Crypto.Util import number from secret import flagsize 128 e 65537 p number.getPrime(size) q number.getPrime(size) n p*qm libnum.s2n(flag) c pow(m, e, n)print(n %d % n) print(c %d % c)n 8850300144784503160345704866…...

编程日记 2026/4/26 21:19:51

12.7 LangChain代理系统Agents深度解析：构建自主决策的智能体应用

LangChain代理系统Agents深度解析：构建自主决策的智能体应用 一、代理系统的核心价值 代理系统是大模型应用的决策中枢，通过动态工具调度和任务分解，突破传统链式流程的三大局限： 动态规划：根据实时反馈调整执行路径工具集成：无缝对接500+外部系统API认知迭代：通过记忆…...

编程日记 2026/4/25 9:41:14

解释一下数据库中的事务隔离级别，在 Java 中如何通过 JDBC设置事务隔离级别？

数据库中的事务隔离级别是用于控制并发事务之间相互影响的一种机制。 它定义了事务之间的可见性和影响范围&#xff0c;常见的隔离级别包括&#xff1a; 读未提交&#xff08;Read Uncommitted&#xff09;&#xff1a;最低的隔离级别&#xff0c;事务中的修改即使没有提交也…...

编程日记 2026/2/26 11:44:29

[NKU]C++安装环境 VScode

bilibili安装教程 vscode 关于C/C的环境配置全站最简单易懂&#xff01;&#xff01;大学生及初学初学C/C进&#xff01;&#xff01;&#xff01;_哔哩哔哩_bilibili 1安装vscode和插件 汉化插件 ​ 2安装插件 2.1 C/C 2.2 C/C Compile run ​ 2.3 better C Syntax ​ 查看已…...

编程日记 2026/4/29 2:15:13

Node.js 环境配置

什么是 Node.js Node.js 是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行时环境&#xff0c;它允许你在服务器端运行 JavaScript。传统上&#xff0c;JavaScript 主要用于浏览器中的前端开发&#xff0c;而 Node.js 使得 JavaScript 也能够在服务器上执行&#xff0c;…...

编程日记 2026/4/30 10:26:16

1Panel应用推荐：WordPress开源博客软件和内容管理系统

1Panel&#xff08;github.com/1Panel-dev/1Panel&#xff09;是一款现代化、开源的Linux服务器运维管理面板&#xff0c;它致力于通过开源的方式&#xff0c;帮助用户简化建站与运维管理流程。为了方便广大用户快捷安装部署相关软件应用&#xff0c;1Panel特别开通应用商店&am…...

编程日记 2026/4/26 13:28:29

C++：string类的模拟实现

目录 1.引言 2.C模拟实现 2.1模拟实现构造函数 1&#xff09;直接构造 2&#xff09;拷贝构造 2.2模拟实现析构函数 2.3模拟实现其他常规函数 1&#xff09;c_str函数 2&#xff09;size函数 3&#xff09;begin/end函数 4&#xff09;reserve函数 5&#xff09;re…...

编程日记 2026/2/21 12:18:28

DMZ区的作用和原则

DMZ&#xff08;Demilitarized Zone&#xff0c;非军事化区&#xff09;是网络安全架构中一个重要的概念&#xff0c;其主要作用和原则如下&#xff1a; DMZ的作用 隔离风险 DMZ作为内外网络之间的缓冲区&#xff0c;能够有效隔离外部网络的攻击风险。将对外提供服务的服务器&…...

编程日记 2026/4/30 2:02:00

21.命令模式（Command Pattern）

定义 命令模式&#xff08;Command Pattern&#xff09; 是一种行为型设计模式&#xff0c;它将请求封装成一个对象&#xff0c;从而使您可以使用不同的请求、队列、日志请求以及支持撤销操作等功能。命令模式通过将请求&#xff08;命令&#xff09;封装成对象&#xff0c;使…...

编程日记 2026/4/26 23:20:24