Chrome 11 to Feature Smoother Animated Web Content while Reducing CPU Usage

Google plan to introduce in Chrome 11, "reduce CPU consumption even for pages that're using setTimeout and setInterval." "For background tabs, we intend to run each independent timer no more than once per second. This change has already been implemented in the Chrome dev channel and canary builds. While there may be some compatibility impact […]

Google plan to introduce in Chrome 11, "reduce CPU consumption even for pages that're using setTimeout and setInterval." "For background tabs, we intend to run each independent timer no more than once per second. This change has already been implemented in the Chrome dev channel and canary builds. While there may be some compatibility impact for web pages, we believe that improving the user experience for the foreground tab, and increasing battery life, are problems needing to be addressed," stated Google.

"An experimental webkitRequestAnimationFrame API has been upstreamed to WebKit, and is available starting in Chrome 10. This's essentially the same as mozRequestAnimationFrame, but supports an optional second argument which's the element that the callback intends to animate. This additional information will allow the browser to avoid animating elements that're not visible to user. Chrome doesn't run requestAnimationFrame callbacks for background tabs at all, which dramatically reduces CPU consumption when multiple tabs containing animated content are in the same window."

The WebGL samples project contains a three dimensional graphics library that has been modified to use requestAnimationFrame rather than setTimeout or setInterval. Take a look at this library for a good example of how to convert existing timeout based animations to the new style, while preserving compatibility with browsers that don't support requestAnimationFrame.

[Source]