Performance Calendar

• 10 – Performance Calendar » Hardware Accelerated CSS: The Nice vs The Naughty

"Everyone is fascinated with the smooth animation at 60 frames/second. It is hardly a surprise that one of the most prevalent performance advices to web developers is to use hardware accelerated CSS. In some extreme cases, it is not uncommon to imply that forcing it via translate3d will automatically boost your application performance (hint: it is not the case).

Modern web browsers can take advantage of the GPU (graphics processing unit) to accelerate page rendering. Among many different features of a GPU, it can hold a limited number of textures (a rectangle of pixels) and manipulate those textures efficiently, including applying a certain transformation (translation, scaling, rotating, etc). This is extremely useful to achieve a fluid animation. Instead of drawing the pixels for every animation frame, the browser will ‘snapshot’ the DOM element and store it as a GPU texture (often called as layer). Later, the browser will simply tell the GPU to transform the said texture to give the perception of an animating DOM element. This is called GPU compositing, naturally referred to as ‘hardware acceleration’.

Unfortunately, a web browser is a complex piece of software (Firefox comprises millions of lines of code). Because of this, a blanket simplified statement such as ‘use translate3d for performance’ is likely a hit-and-miss. It is thus imperative to understand a little more as to what happens under hood so that you can understand the situation better."

Things to think about here, especially when you use css for animation. Probably not a good idea to be using a dial up modem for these types of web pages.