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

requestAnimationFrame 深度理解

requestAnimationFrame 深度学习(请求动画帧)

定义

  • requestAnimationFrame 是一个浏览器提供的用于在下次重绘之前调用指定的回调函数的方法。它主要用于创建流畅的动画效果,通过与浏览器的刷新率同步来优化性能和效率。
  • 执行时机 是每一帧浏览器进行渲染之前,是一个高优的任务。
  • 同步执行:requestAnimationFrame 会告诉浏览器你希望执行一次重绘,并要求浏览器在下一次重绘之前调用指定的回调函数。这样可以确保你的动画帧与浏览器的刷新频率同步。
  • 节省资源:当页面被最小化或不可见时(比如切换到其他标签页),浏览器会自动降低 requestAnimationFrame 的调用频率,甚至是暂停,这有助于节省系统资源。
  • 参数:该方法接受一个回调函数作为参数,这个回调函数会在浏览器准备重绘画面时被调用。回调函数会被传入一个参数,表示回调被执行的时间点的时间戳(高精度时间),单位是毫秒,但与 Date.now() 返回的时间戳不同,它是相对于页面加载开始的时间。
  • 取消 cancelAnimationFrame(xx)

实战

React fiber
  1. fiber 是把整个任务 分成若干个很多个小任务,每次执行一个任务。执行完成后会看看有没有剩余时间,如果有,继续执行下一个任务。如果没有放弃执行,交给浏览器调度。
问询模式
  1. 使用问询模式 解决 setInterval 时间不准确的问题
  2. 递归调用

相关文章:

  • 第二十三天 - 性能优化技巧 - 内存分析与调优 - 练习:资源泄漏检测工具
  • GPT对话UI--通义千问API
  • 【LangChain4j快速入门】5分钟用Java玩转GPT-4o-mini,Spring Boot整合实战!| 附源码
  • 基于labview模拟出租车计价器的设计
  • 解锁动态规划的奥秘:从零到精通的创新思维解析(9)
  • React 设计艺术:如何精确拆分组件接口,实现接口隔离原则
  • 逻辑回归 (Logistic Regression)
  • C++学习:六个月从基础到就业——面向对象编程:重载运算符(下)
  • GPU 招投标全流程分析与总结
  • UE5 相机裁剪面
  • qt与html通信
  • 10.(vue3.x+vite)div实现tooltip功能(css实现)
  • 从0到1:让AI赋能计算机的全流程实践指南
  • 矫平机:工业制造的精密“雕刻师”
  • RPCRT4!OSF_CCONNECTION::OSF_CCONNECTION函数分析之创建一个RPCRT4!OSF_CCALL--RPC源代码分析
  • Kotlin整数相除精度损失roundToInt
  • 用Zotero + Word 宏,一键插入带超链接的参考文献!
  • 铷元素的市场供需情况如何?
  • 破局遗留系统!AI自动化重构:从静态方法到Spring Bean注入实战
  • psplash进度条显示旋转
  • 世界第一爆冷出局,双打均剩独苗,新周期国乒考验从双打开始
  • 巴基斯坦西南部一辆客车遭袭造成至少4死30伤
  • “共栖与绵延”系列对话|张国捷、刘帅:以蚁为序的生命网络
  • 济南一医院救护车未执行紧急任务时违规鸣笛
  • 5月LPR下调:1年期、5年期以上品种均下调10个基点
  • 文化破冰,土耳其亚美尼亚合拍摄影大师阿拉·古勒传记片