requestAnimationFrame
1.介绍
HTML5新增的定时器,是一个用于优化动画效果的API,会在下一次浏览器重绘之前执行回调函数.
2.优点
1.cpu节能:对于隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流;在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停.
2.函数节流:在高频率事件( resize, scroll 等)中,为了防止在一个刷新间隔内发生多次函数执行,RequestAnimationFrame 可保证每个刷新间隔内,函数只被执行一次.
3.减少Dom操作:requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒 60 帧
3.requestAnimationFrame的使用
equestAnimationFrame的用法与settimeout很相似,只是不需要设置时间间隔而已.它返回一个整数,表示定时器的编号,这个值可以传递给cancelAnimationFrame用于取消这个函数的执行.
var timer = requestAnimationFrame(function(){
console.log(0);
});
cancelAnimationFrame(timer);
cancelAnimationFrame(1); 都能取消
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
if(parseInt(myDiv.style.width) < 500){
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
4.requestAnimationFrame和setTimeout的区别是什么
requestAnimationFrame和setTimeout的区别包括:
- 执行时机:requestAnimationFrame会在下一次重绘之前执行回调函数,而setTimeout会在指定的时间间隔之后执行回调函数。
- 精度和性能:由于requestAnimationFrame会根据浏览器的刷新率来执行回调函数,因此可以实现更加精确和高效的动画效果,而setTimeout则可能会出现卡顿或闪烁的情况。
- 兼容性:requestAnimationFrame在一些老版本的浏览器中可能不支持,而setTimeout则是比较通用的方法
5.setTimeout 执行动画的缺点
它通过设定间隔时间来不断改变图像位置,达到动画效果。但是容易出现卡顿、抖动的现象;原因是:
1.settimeout 任务被放入异步队列,只有当主线程任务执行完后才会执行队列中的任务,因此实际执行时间总是比设定时间要晚;
2.settimeout 的固定时间间隔不一定与屏幕刷新间隔时间相同,会引起丢帧
6.如何兼容不支持requestAnimationFrame的浏览器?
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback) {
return setTimeout(callback, 1000 / 60);
};
}