【再学前端】window.requestAnimationFrame

[Samgao0312]

• requestAnimationFrame - Javascript标准参考教程（alpha）
• js动画之requestAnimationFrame
• js中动画函数requestAnimationFrame解释
• [每日一题]requestAnimationFrame不香吗？

介绍

requestAnimationFrame 是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。requestAnimationFrame 方法会告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用回调函数来更新动画。 简单的讲requestAnimationFrame就是一个以屏幕刷新率间隔时间的定时器，requestAnimationFrame回调函数执行频率紧跟刷新频率且执行在重绘之前。

requestAnimationFrame 使用一个回调函数作为参数。这个回调函数会在浏览器重绘之前调用。

requestID = window.requestAnimationFrame(callback);

优势

• 1、充分利用显示器的刷新机制，比较节省系统资源。 显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。
• 2、在每一帧重绘之前调用，调用频率与浏览器刷新频率相同。
• 3、requestAnimationFrame 在执行 js 实现的动画时可以减少资源消耗。
• 4、隐藏或不可见元素 requestAnimationFrame 不会执行，进一步减少资源消耗。

缺点

不过有一点需要注意，requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。

与setTimeout/setInterval的区别

requestAnimationFrame(code)，一般用于动画，与 setTimeout 方法类似，区别是 setTimeout 是用户指定的，而 requestAnimationFrame 是浏览器刷新频率决定的，一般遵循 W3C 标准，它在浏览器每次刷新页面之前执行。

• setTimeout、setInterval 和 requestAnimationFrame 之间的区别
• 五分钟面试题——requestAnimationFrame 和 setTimeout 区别
• setTimeout/setInterval与requestAnimationFrame的区别？
• JS 动画三剑客 ——setTimeout、setInterval、requestAnimationFrame
• 【面试】JS实现动画之setTimeout、setInterval和requestAnimationFrame