Understanding Browser Compositing Layers: A Guide to CSS Hardware Acceleration

This article explores browser rendering principles and compositing layers, which are essential for optimizing frontend performance. The author encountered a flickering issue with a countdown timer on iOS devices when switching tabs, which was resolved by adding will-change:transform to promote the element to a compositing layer.

The browser rendering process involves: downloading and parsing HTML, processing CSS to build CSSOM tree and DOM tree, merging them into a Render Tree, calculating node positions, and finally compositing layers to display on screen.

Compositing Layers are special layers that receive GPU rendering. Elements with certain properties are automatically promoted to compositing layers: transform: translateZ(0) , backface-visibility: hidden , will-change (with values like opacity, transform, top, left, bottom, right), and elements like video , canvas , iframe .

Implicit compositing occurs when non-composited elements appear above composited ones in stacking order, causing them to be promoted to compositing layers. Layer compression helps prevent layer explosion by combining overlapping render layers into a single layer.

Benefits of compositing layers include hardware acceleration via GPU, isolated repainting, and avoiding layout/paint triggers for transform and opacity. However, excessive compositing can lead to high memory usage and performance degradation.

Best practices: Use transform and opacity for animations instead of top/left; use will-change sparingly and only when properties are about to change; minimize compositing layer paint areas to reduce memory consumption.