requestAnimationFrame

最新推荐文章于 2023-04-27 15:57:28 发布

gigi就是我

最新推荐文章于 2023-04-27 15:57:28 发布

阅读量473

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/crystal6918/article/details/70229226

javascript 专栏收录该内容

100 篇文章

订阅专栏

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是让浏览器在下一个动画帧安排一次网页重绘。

requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。
显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次。

若我们利用setTimeout和setInterval来完成，如果设置的时间间隔小于16.7ms（每秒60次），那么中间有些帧的绘制是不会被展现在屏幕上的，会存在一个过度绘制的问题。

requestAnimationFrame的基本思想就是与浏览器的这个刷新频率保持同步，利用这个刷新频率进行页面重绘。

注意：requestAnimationFrame是在主线程上完成。

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

requestID = window.requestAnimationFrame(callback);

cancelAnimationFrame方法用于取消重绘。

window.cancelAnimationFrame(requestID);

兼容性：

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

若浏览器没有实现的话，可以用setTimeout来代替实现，频率则为1秒/60。