requestAnimationFrame类似setTimeout,不同的是requestAnimationFrame会在浏览器下次重绘之前调用指定的回调函数,具体刷新间隔取决于浏览器的刷新频率。该方法使用一个回调函数作为参数,这个回调函数只有一个传参,DOMHighResTimeStamp,指示requestAnimationFrame() 开始触发回调函数的当前时间(performance.now() 返回的时间)。
注:performance.now()是当前时间与performance.timing.navigationStart(开始导航到当前页面的时间,即在地址栏输入地址后按下回车时的时间)的时间差,以微秒(百万分之一秒)为单位的时间
需要注意的是requestAnimationFrame和setTimeout一样只会调用一次,如果需要重复执行必须在回调函数中再次调用requestAnimationFrame()。
requestAnimationFrame()会返回一个 long 整数,请求 ID ,是回调列表中唯一的标识,是个非零值。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。
requestAnimationFrame()的特点:
requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量
requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销(举个例子比如:页面最小化了,或者被Tab切换了。页面是不会重绘的,自然,requestAnimationFrame也不会调用(没通知啊)。页面绘制全部停止,资源高效利用。)
requestAnimationFrame的兼容性存在一些问题,所以需要做一些兼容处理
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
return window.setTimeout(callback, 1000 / 60);
};
})();
包含了cancelAnimationFrame的兼容
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
// Webkit中此取消方法的名字变了
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
} ());