Take care when using null transform hacks for forced GPU acceleration

At my #jQueryTO keynote on paint optimization, I mentioned the performance benefits of promoting DOM elements to a composite layer using GPU acceleration in Chrome. Moving compositing of page layers to the GPU can offer better efficiency than the CPU in terms of speed and drawing and is generally a good thing as you avoid slow copies of large data from video to system memory.

Whilst well-known hacks like translateZ(0) can be used for forcing GPU acceleration on any element, it's important not to apply it to everything as this will offload a lot to the GPU. Again, don’t use this hack on every element on your page - it might pass for okay on desktop but it won’t on lower-end devices like mobile. This is because the GPU has limited VRAM and exhausting it can have a negative impact on performance. You really don’t want to swamp it.

Instead, only use hardware compositing on those elements where you have a measurably high repaint cost. The link between the CPU and GPU doesn’t have a high bandwidth and you need to be careful about introducing excessive texture uploads to the GPU. The more layers you introduce to the stack, the more uploads have to be made. The more layers that are painted, the same. The translateZ(0) hack is really only useful for minimizing repaints at this point.

tl;dr: Be careful about this hack, particularly on lower-end devices where it's easier to strain your VRAM, resulting in a noticeable lag if forcing such accelerations on every element. Use the hack with care for best mileage and do read http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome and http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/ by +Paul Lewis for more information on hardware compositing in Chrome. 

PS: +Jake Archibald might to do a video demonstrating the impact of using this hack on all your elements soon. It may or may not contain bees, but watch out for it!
Shared publiclyView activity