Understanding How The Browser's Pixel Pipeline Works
A smooth user experience is one of the hardest things to get right in web development. One thing stands in the way: rendering jank.
What is rendering jank?
Rendering jank is any stuttering, juddering, or halting that users see when a site or app can't keep up with the refresh rate. It happens when frames take too long for the browser to make, and it hurts how users experience your site or app.
What is the browser pixel pipeline?
The browser pixel pipeline turns HTML, CSS, and JavaScript into visual elements on the screen.
It runs five major stages before the pixels reach the screen.
JavaScript
Handles work that results in visual changes.
Style calculations
The browser figures out which CSS rules apply to which HTML elements based on matching selectors. It then applies those rules and calculates the final styles for each element.
Higher specificity increases the computational cost for the browser to locate matching elements.
Layout
Once the browser knows which rules apply, it calculates the position and size of each element from its style and content. It works out how elements arrange relative to each other within the document flow. In the web's layout model, one element can affect others. For instance, the width of the <body> element affects the dimensions of its child elements all the way up and down the tree.
Paint
The browser fills in the pixels on the screen, drawing text, colors, images, borders, and shadows. This drawing usually happens onto multiple surfaces, often called layers.
Composite
The composite stage combines the painted layers into the final view of the page. It accounts for the stacking order of elements, transparency, and blending modes, bringing the layers together to produce the pixel values shown on the screen.
Each stage of the pixel pipeline is a chance to introduce jank in animations or delay the painting of frames, even for small visual changes to the interface.
When you change a CSS property, the browser has to reflect that change. Some values change the page layout. For instance, a change in width makes the browser update layout, paint any changed pixels, then composite them together. That's a lot of work. Some properties skip steps. A change in background-image, for instance, needs no layout change, but still needs paint and composite.
Understanding the browser's pixel pipeline helps you improve performance and build smoother user experiences.
Quick Recap
-
Pipeline Stages
- JavaScript: Handles visual changes
- Style calculations: Applies CSS rules
- Layout: Calculates element positions and sizes
- Paint: Fills pixels on screen
- Composite: Combines layers for final display
-
Performance Considerations
- Higher CSS specificity increases computational cost
- Layout changes trigger the most expensive operations
- Some CSS properties can skip certain pipeline stages
- Layer management affects composite performance
-
Best Practices
- Minimize layout-triggering properties
- Use compositor-only properties when possible
- Optimize CSS selectors for better performance
- Manage layer count to prevent memory issues
References
- Web.dev - Stick to Compositor-Only Properties and Manage Layer Count
- Web.dev - Rendering performance
- Github - pixel-pipeline
