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

使用requestAnimationFrame减少浏览器重绘

news 2026/5/17 7:09:35

文章目录

  • 介绍
  • 使用
    • 使用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

OpenClaw实战教程：声明式配置驱动的高效数据抓取方案

1. 项目概述&#xff1a;一个关于“OpenClaw”的实战教程 最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“OpenClawTuto”。光看名字&#xff0c;你可能会有点摸不着头脑&#xff0c;这“OpenClaw”到底是个啥&#xff1f;是某种开源机械爪&#xff1f;还是一个代号&…...

编程新知 2026/5/17 6:14:30

终极免费换肤方案：R3nzSkin国服版完整使用教程

终极免费换肤方案&#xff1a;R3nzSkin国服版完整使用教程 【免费下载链接】R3nzSkin-For-China-Server Skin changer for League of Legends (LOL) 项目地址: https://gitcode.com/gh_mirrors/r3/R3nzSkin-For-China-Server 想要在英雄联盟国服免费体验所有皮肤&#x…...

编程新知 2026/5/17 6:12:27

构建轻量级应用沙盒：Microverse原理与实践指南

1. 项目概述&#xff1a;一个轻量级、可移植的“微宇宙”开发沙盒最近在折腾一些边缘计算和嵌入式AI应用的原型验证&#xff0c;经常遇到一个头疼的问题&#xff1a;开发环境和部署环境不一致。在本地笔记本上跑得好好的Python脚本&#xff0c;放到树莓派或者Jetson Nano上&…...

编程新知 2026/5/17 5:37:42

跨平台鼠标控制库ez-cursor-free：原理、实现与自动化实战

1. 项目概述与核心价值如果你是一名开发者&#xff0c;尤其是经常需要处理跨平台UI自动化、游戏脚本或者桌面应用交互的开发者&#xff0c;那么你一定对“鼠标控制”这个基础但又充满细节的环节感到过头疼。不同的操作系统&#xff08;Windows, macOS, Linux&#xff09;提供了…...

编程新知 2026/5/17 5:06:28

基于WLED分段功能与激光切割的多层智能艺术灯板制作全攻略

1. 项目概述与核心价值如果你和我一样&#xff0c;对那种能随着音乐呼吸、或者能独立变换不同区域色彩的智能灯光装置着迷&#xff0c;那么你一定会喜欢这个项目。它远不止是把LED灯条粘在板子后面那么简单&#xff0c;而是将激光切割的精密工艺、分层的艺术设计&#xff0c;与…...

编程新知 2026/5/17 4:31:36

量子退火与经典优化结合的金融投资组合优化实践

1. 量子退火与经典优化结合的金融投资组合优化实践在金融投资领域&#xff0c;如何构建最优投资组合一直是核心挑战。传统方法如现代投资组合理论(MPT)和均值-方差优化(MVO)虽然奠定了理论基础&#xff0c;但在处理大规模资产配置时往往面临计算效率瓶颈。近年来&#xff0c;量…...

编程新知 2026/5/17 3:30:23

PromptCraft-Robotics：基于LLM的机器人任务规划与安全控制实践

1. 项目概述与核心价值最近在机器人编程和AI应用领域&#xff0c;一个名为“PromptCraft-Robotics”的项目在开发者社区里引起了不小的讨论。这个项目由微软开源&#xff0c;其核心目标直指一个困扰许多开发者和研究者的痛点&#xff1a;如何让大型语言模型&#xff08;LLM&…...

编程新知 2026/5/17 3:04:37

基于Python与Playwright的招聘信息自动化聚合与智能筛选工具实践

1. 项目概述&#xff1a;一个面向求职者的自动化信息聚合与投递工具最近在和一些做开发的朋友聊天&#xff0c;发现大家普遍有个痛点&#xff1a;找工作太费时间了。每天要在几个招聘App之间来回切换&#xff0c;重复筛选岗位、刷新列表、投递简历&#xff0c;机械性的操作占据…...

编程新知 2026/5/17 2:49:51

基于Feather RP2040与CircuitPython的CNC旋钮宏键盘DIY指南

1. 项目概述&#xff1a;打造你的专属生产力旋钮如果你经常使用像Cura、Fusion 360或者Adobe系列这类专业软件&#xff0c;一定对频繁切换工具、调整参数时在键盘和鼠标间来回切换的繁琐深有体会。传统的键盘快捷键虽然快&#xff0c;但组合键太多容易忘记&#xff0c;而且缺乏…...

编程新知 2026/5/17 1:00:41

ctfileGet：城通网盘直连地址解析工具的技术原理与实用指南

ctfileGet&#xff1a;城通网盘直连地址解析工具的技术原理与实用指南 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet ctfileGet是一个基于Web的开源工具&#xff0c;专门用于解析城通网盘分享链接并获…...

编程新知 2026/5/17 0:56:25