requestAnimationFrame

requestAnimationFrame

HTML5新增的api，类似于setTimeout定时器。window对象的一个方法window.requestAnimationFrame 浏览器（所以只能在浏览器中使用）专门为动画提供API，让dom动画，canvas动画。svg动画。webGL动画等有一个统一的刷新机制。

特点：

1.按帧对网页进行重绘。该方法告诉浏览器希望之星动画并请求浏览器在下一次重绘之前调用就掉函数更新动画。

2.由系统来决定回调函数的执行机制。在运行时浏览器会自动优化方法的调用。

3. 显示器有固定的刷新频率（60Hz 或 75Hz），也就是说，每秒最多只能重绘

60 次或 75 次，requestAnimationFrame 的基本思想让页面重绘的频率与

这个刷新频率保持同步比如显示器屏幕刷新率为 60Hz，使用 requestAnimationFrame API，那么回调函数就每 1000ms / 60 ≈ 16.7ms 执行一次；如果显示器屏幕的刷新率为 75Hz，那么回调函数就每 1000ms / 75 ≈ 13.3ms 执行一次。

4.通过 requestAnimationFrame 调用回调函数引起的页面重绘或回流的时间间

隔和显示器的刷新时间间隔相同。所以 requestAnimationFrame 不需要像

setTimeout 那样传递时间间隔，而是浏览器通过系统获取并使用显示器刷

新频率

优势：

从实现的功能和使用方法上，requestAnimationFrame 与定时器 setTimeout 都相

似，所以说其优势是同 setTimeout 实现的动画相比。

a. 提升性能，防止掉帧

• 浏览器 UI 线程：浏览器让执行 JavaScript 和更新用户界面（包括

重绘和回流）共用同一个单线程，称为“浏览器 UI 线程”

• 浏览器 UI 线程的工作基于一个简单的队列系统，任务会被保存到队

列中直到进程空闲。一旦空闲，队列中的下一个任务就被重新提取出

来并运行。这些任务要么是运行 JavaScript 代码，要么执行 UI 更新。