type
Post
status
Published
date
Feb 13, 2025
slug
draging-requestAnimationFrame
summary
tags
思考
开发
category
技术分享
icon
password
做拖动时，渲染卡顿，找了半天才发现问题所在。
原代码如下：
修改后代码如下：
来看看deepSeek-r1满血版的分析
requestAnimationFrame 详细解释
1. 核心概念
- 浏览器原生动画接口，专为高性能动画设计
- 自动同步显示器刷新率（60Hz设备约16.67ms/帧，120Hz设备约8.33ms/帧）
- 在浏览器重绘前执行回调，确保动画与渲染管道完美同步
2. 核心优势
- 智能帧率适配：自动匹配屏幕刷新率，120Hz屏幕比60Hz获得更流畅动画
- 后台暂停机制：标签页切到后台时自动停止动画，节省CPU/GPU资源
- 电池友好：移动端设备智能降低功耗，延长续航时间
- 零延迟同步：消除传统定时器的累积误差，避免动画"跳帧"
3. 与setTimeout对比
特性 | setTimeout | requestAnimationFrame |
执行时机 | 宏任务队列，可能错过渲染帧 | 渲染前阶段，精准同步 |
帧率控制 | 需手动计算16ms间隔 | 自动匹配显示器刷新率 |
后台执行 | 持续消耗资源 | 自动暂停 |
动画卡顿 | 易出现帧丢失 | 保持帧率稳定 |
移动端耗电 | 高 | 低（浏览器优化） |
4. 工作原理
- 事件循环阶段：在浏览器执行完微任务后，渲染引擎开始工作前触发
- 执行流程：
- JavaScript执行主线程任务
- 处理requestAnimationFrame回调队列
- 执行样式计算、布局、绘制等渲染步骤
- 等待下一帧到来
5. 使用示例
6. 性能优化技巧
- 单帧原则：保持回调函数轻量（执行时间<3ms）
- 批量读写：避免强制同步布局
- 分层渲染：对复杂动画元素使用
will-change: transform创建独立图层
- 帧率控制：高性能动画可配合Web Workers预处理数据
7. 特殊场景处理
- 竞态条件：每次启动新动画前取消旧回调
- 低端设备适配：动态降级帧率
8. 浏览器兼容方案
9. 调试与监控
- Chrome DevTools Performance面板查看RAF回调执行情况
- 使用FPS Meter等工具实时监测帧率
- 捕获丢帧事件：
10. 实际应用场景
- 滚动动画优化
- 游戏主循环
- 数据可视化图表渲染
- 页面过渡动画
- 视差滚动效果
- Canvas/WebGL渲染
常见误区
- 过度使用：静态页面无需强制使用RAF
- 嵌套陷阱：避免在RAF回调中再请求多层RAF
- 长期不清理：页面隐藏后持续执行动画
- 同步操作：在RAF中执行耗时阻塞操作
最佳实践
- 将DOM操作集中在RAF回调中
- 对连续动画使用递归调用
- 结合CSS动画处理简单效果
- 使用
transform和opacity触发GPU加速
- 复杂场景配合Web Animations API使用