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

使用requestAnimationFrame减少浏览器重绘

news 2026/2/9 14:55:31

文章目录

  • 介绍
  • 使用
    • 使用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/2/7 15:03:56

Mac 终端命令大全

—目录操作— ꔷ mkdir 创建一个目录 mkdir dirname ꔷ rmdir 删除一个目录 rmdir dirname ꔷ mvdir 移动或重命名一个目录 mvdir dir1 dir2 ꔷ cd 改变当前目录 cd dirname ꔷ pwd 显示当前目录的路径名 pwd ꔷ ls 显示当前目录的内容 ls -la ꔷ dircmp 比较两个目录的内容 di…...

编程日记 2025/2/7 15:01:49

如何使用deepseek开发一个翻译API

什么是deepseek Deepseek 是一个基于人工智能技术的自然语言处理平台&#xff0c;提供了多种语言处理能力&#xff0c;包括文本翻译、语义分析、情感分析等。它通过深度学习模型和大规模语料库训练&#xff0c;能够实现高质量的文本翻译和多语言理解。Deepseek 的核心优势在于…...

编程日记 2025/2/7 14:58:43

vue如何解决跨域

文章目录 vue如何解决跨域1. 什么是跨域2. 如何解决2.1 CROS&#xff08;Cross-Origin Resource Sharing&#xff0c;跨域资源共享&#xff09;2.2 Proxy2.2.1 使用webpack proxy2.2.2 服务端代理转发2.2.3 通过nginx实现代理 vue如何解决跨域 1. 什么是跨域 跨域本质是浏览器…...

编程日记 2025/2/7 14:55:36

红包雨项目前端部分

创建项目 pnpm i -g vue/cli vue create red_pakage pnpm i sass sass-locader -D pnpm i --save normalize.css pnpm i --save-dev postcss-px-to-viewportpnpm i vantlatest-v2 -S pnpm i babel-plugin-import -Dhttps://vant.pro/vant/v2/#/zh-CN/<van-button click&…...

编程日记 2025/2/7 14:52:29

新版AndroidStudio 修改 jdk版本

一、问题 之前&#xff0c;在安卓项目中配置JDK和Gradle的过程非常直观&#xff0c;只需要进入Android Studio的File菜单中的Project Structure即可进行设置&#xff0c;十分方便。 如下图可以在这修改JDK: 但是升级AndroidStudio之后&#xff0c;比如我升级到了Android Stu…...

编程日记 2025/2/7 14:50:25

【golang学习之旅】使用VScode安装配置Go开发环境

1. 下载并安装Go 1.1 下载地址1.2 选择版本并下载1.3 安装目录1.4 验证是否安装成功 2. 配置环境变量 2.1 配置步骤2.2 GO部分环境变量说明 3. 下载或更新 Vscode 3.1 下载地址3.2 安装步骤 4. 为Go开发配置VScode 1. 下载并安装Go 1.1 下载地址 https://studygolang.com/dl…...

编程日记 2025/2/7 14:47:21

langchain教程-2.prompt

前言 该系列教程的代码: https://github.com/shar-pen/Langchain-MiniTutorial 我主要参考 langchain 官方教程, 有选择性的记录了一下学习内容 这是教程清单 1.初试langchain2.prompt3.OutputParser/输出解析4.model/vllm模型部署和langchain调用5.DocumentLoader/多种文档…...

编程日记 2025/2/7 14:45:18

GGML、GGUF、GPTQ 都是啥?

GGML、GGUF和GPTQ是三种与大型语言模型（LLM）量化和优化相关的技术和格式。它们各自有不同的特点和应用场景，下面将详细解释： 1. GGML（GPT-Generated Model Language） 定义：GGML是一种专为机器学习设计的张量库，由Georgi Gerganov创建。它最初的目标是通过单一文件格式…...

编程日记 2025/2/7 14:43:09

C++ 原码、反码、补码和位操作符

目录 一、原码、反码、补码 二、位操作符 1、左移操作符是双⽬操作符 移位规则&#xff1a;左边抛弃、右边补 0 2、右移操作符是双⽬操作符 逻辑右移&#xff1a;左边⽤ 0 填充&#xff0c;右边丢弃算术右移&#xff1a;左边⽤原该值的符号位填充&#xff0c;右边丢弃 3、…...

编程日记 2025/2/7 14:41:03

idea中git版本回退

idea中git版本回退 将dev分支代码合并到master分支执行回退步骤 将dev分支代码合并到master分支 #合并成功之后 执行回退步骤 #在指定的版本上 右键 #这里选择【Hard】彻底回退 #本地的master分支回退成功 #将本地的master强制推送到远程&#xff0c;需要执行命令 git p…...

编程日记 2025/2/7 14:39:57

【PostgreSQL内核学习 —— （WindowAgg（三））】

WindowAgg set_subquery_pathlist 部分函数解读check_and_push_window_quals 函数find_window_run_conditions 函数执行案例总结 计划器模块&#xff08;set_plan_refs函数&#xff09;set_windowagg_runcondition_references 函数执行案例 fix_windowagg_condition_expr 函数f…...

编程日记 2025/2/7 14:38:53

redis教程

Redis 教程 Redis 是一个开源的内存数据结构存储系统&#xff0c;用作数据库、缓存和消息代理。以下是一些基础知识和常用操作。 一、简介 Redis 支持多种数据结构&#xff0c;如字符串、哈希、列表、集合、有序集合等。它具有高性能、高可用性和数据持久化的特性。 二、安…...

编程日记 2025/2/7 14:36:48

Python aiortc API

本研究的主要目的是基于Python aiortc api实现抓取本地设备媒体流&#xff08;摄像机、麦克风&#xff09;并与Web端实现P2P通话。本文章仅仅描述实现思路&#xff0c;索要源码请私信我。 1 demo-server解耦 1.1 原始代码解析 1.1.1 http服务器端 import argparse import …...

编程日记 2025/2/7 14:34:44

Transaction rolled back because it has been marked as rollback-only问题解决

1、背景 在我们的日常开发中&#xff0c;经常会存在在一个Service层中调用另外一个Service层的方法。比如&#xff1a;我们有一个TaskService&#xff0c;里面有一个execTask方法&#xff0c;且这个方法存在事物&#xff0c;这个方法在执行完之后&#xff0c;需要调用LogServi…...

编程日记 2025/2/7 14:33:43

深入浅出 DeepSeek V2 高效的MoE语言模型

今天&#xff0c;我们来聊聊 DeepSeek V2 高效的 MoE 语言模型&#xff0c;带大家一起深入理解这篇论文的精髓&#xff0c;同时&#xff0c;告诉大家如何将这些概念应用到实际中。 &#x1f31f; 什么是 MoE&#xff1f;——Mixture of Experts&#xff08;专家混合模型&#x…...

编程日记 2025/2/7 14:30:39

读书笔记--分布式架构的异步化和缓存技术原理及应用场景

本篇是在上一篇的基础上&#xff0c;主要对分布式应用架构下的异步化机制和缓存技术进行学习&#xff0c;主要记录和思考如下&#xff0c;供大家学习参考。大家知道原来传统的单一WAR应用中&#xff0c;由于所有数据都在同一个数据库中&#xff0c;因此事务问题一般借助数据库事…...

编程日记 2025/2/7 14:29:38

售后板子HDMI无输出分析

问题&#xff1a; 某产品售后有1例HDMI无输出。 分析&#xff1a; 1、测试HDMI的HPD脚&#xff08;HDMI座子的19pin&#xff09;&#xff0c;测试电压4.5V&#xff0c;属于正常。 2、用万用表直流电压档&#xff0c;测试HDMI的3对数据脚和1对时钟脚&#xff08;板子通过HDM…...

编程日记 2025/2/7 14:28:37

python3处理表格常用操作

使用pandas库读取excel文件 import pandas as pd data pd.read_excel(D:\\飞书\\近一年用量.xlsx)指定工作表 import pandas as pd data pd.read_excel(D:\\飞书\\近一年用量.xlsx, sheet_nameSheet1)读取日期格式 data pd.read_excel(example.xlsx, parse_dates[Date])添…...

编程日记 2025/2/7 14:27:36

AUX接口（Auxiliary Port）

AUX接口&#xff08;Auxiliary Port&#xff09;是网络设备&#xff08;如路由器、交换机等&#xff09;上的一个辅助端口&#xff0c;主要用于设备的配置、管理和维护。以下是关于AUX接口的一些关键点&#xff1a; ### 1. **功能** - **设备配置**&#xff1a;通过AUX接口连接…...

编程日记 2025/2/7 14:18:21

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2026/2/4 19:47:03

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2026/1/20 12:53:30

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/12/8 19:02:25

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

编程新知 2025/9/14 20:44:53