Monday, February 6, 2012

Improving the performance of your HTML5 applications with hardware acceleration

I have never used jQuery's animation features or those of other JavaScript frameworks, and I am not going to use them either since CSS3 has animation built-in. I am not even talking about keyframe animation but about relatively simple transitions. An example of such a transition can be found in my post A CSS 3 only solution to show and enlarge a thumbnail layer.

Why should you use CSS3 animations, at least when your target browser supports them? Because JavaScript-based animations can never be as quick as 'native' browser animations. CSS3 transitions and transforms benefit from a feature that is called 'hardware acceleration'. This means that a browser can offload tasks that would otherwise be calculated by the main CPU to the graphics processing unit (GPU) in your computer's graphics adapter. This can yield big performance gains and can also reduce resource consumption on mobile devices.

Currently most browsers only use GPU acceleration when they have a strong indication that an HTML element would benefit from it. But how do I, the programmer, know for certain that my transitions are being manipulated at the GPU level? Recently I discovered a very useful command-line argument for Chrome to help debugging GPU acceleration: --show-composited-layer-borders. If this flag is passed to Chrome at its startup, a red border appears around elements that are hardware accelerated. If you are on the Windows operating system, simply add the flag to the properties of a Chrome browser shortcut:
  1. Right click on your "Chrome" icon.
  2. Choose 'Properties'.
  3. At the end of the 'Target' input field, put this parameter:
    --show-composited-layer-borders
  4. The target path should now look like: Chrome.exe --show-composited-layer-borders
Another useful parameter that I am currently testing may be --show-paint-rects. By the way, I have only mentioned two of the many Chrome command-line switches that are available.

Hardware accelerated elements in Chrome are displayed with a red border around them when the --show-composited-layer-borders flag is used.

No comments:

Post a Comment