The code snippet below is taken from the Core HTML 5 canvas:
window.requestNextAnimationFrame = (function() {
var originalWebkitRequestAnimationFrame = undefined,
wrapper = undefined,
callback = undefined,
geckoVersion = 0,
userAgent = navigator.userAgent,
index = 0,
self = this;
// Handling Chrome 10 bug related to passing time to animation function
if (window.webkitRequestAnimationFrame) {
wrapper = function(time) {
if (time === undefined) {
time += new Date();
}
self.callback(time);
};
// Making a switch for webkitRequestAnimationFrame
originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;
window.webkitRequestAnimationFrame = function(wrapper, element) {
self.callback = callback;
// Invoking wrapper which in turn calls the callback
originalWebkitRequestAnimationFrame(wrapper, element);
};
}
// Dealing with Gecko 2.0 bug, limiting animations to 30-40 fps.
if (window.mozRequestAnimationFrame) {
// Checking Gecko version. Gecko is used by browsers
// other than Firefox. Version 2.0 corresponds to
// Firefox 4.0.
index = userAgent.indexOf('rv:');
if (userAgent.indexOf('Gecko') != -1) {
geckoVersion = userAgent.substr(index + 3, 3);
if (geckoVersion === '2.0') {
// Forcing return statement to fall through
// to setTimeout() function.
window.mozRequestAnimationFrame = undefined;
}
}
}
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
var start,
finish;
window.setTimeout(function() {
start = +new Date();
callback(start);
finish = +new Date();
self.timeout = 1000 / 60 - (finish - start);
}, self.timeout);
};
})();
Upon checking Chrome console, it appears that both window.webkitRequestAnimationFrame and window.requestAnimationFrame are present. If I understand correctly, window.requestAnimationFrame is the more current option and should be utilized.
If that's the case, does the code spend unnecessary time setting up things for window.requestNextAnimationFrame? Shouldn't it skip that part if my Chrome version already supports window.requestAnimationFrame?