requestAnimationFrame 简介

130 阅读1分钟

①该方法告诉浏览器要执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画;
②该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行;
③结束动画的方法是:cancelAnimationFrame ();
④与 setTimeout 相比,requestAnimationFrame 最大的优势是由系统来决定回调函数的执行时机;它能保证回调函数在屏幕每一次的刷新间隔中被执行一次,这样就不会引起丢帧吸现象,也不会导致动画出现卡顿的问题;
⑤优点:1、CPU 节能:当页面被隐藏或最小化时,setTimeout 仍然在后台执行动画任务,此时页面处于不可见或不可用状态,刷新动画是没有意义的,而 requestAnimationFrame 在页面未激活的状态下会停止渲染,当页面被激活时,动画就从上次停留的地方继续执行,有效节省了 CPU 开销;2、函数节流:在高频率事件(resize,scroll 等)中,为了防止在一个刷新间隔内发生多次函数执行,使用 requestAnimationFrame 可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销;
⑥应用场景:1、监听 scroll 函数;2、大量数据渲染;