Take Care When Using Null Transform Hacks For Forcing 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 our design docs about compositing and layer creation hacks by Paul Lewis for more information on hardware compositing in Chrome. 

PS: If you missed the talk and are wondering if there's a recording, there isn't just yet but I plan on re-recording the talk separately soon. One audience member did however grab a quick video clip of a segment from the start.