Understanding How The Browser's Pixel Pipeline Works

In web development, one of the most significant challenges developers face is ensuring a smooth user experience. However, achieving this goal can be challenging by something called rendering jank.

What is rendering jank?#

Rendering jank is any stuttering, juddering or just plain halting that users see when a site or app isn't keeping up with the refresh rate. It's a result of frames taking too long for a browser to make, and it negatively impacts your users and how they experience your site or app.

What is the browser pixel pipeline?#

The browser pixel is a process of turning HTML, CSS, and JavaScript code into visual elements displayed on a screen.

There are five major stages before presenting the pixels to the screen.

JavaScript#

Used to handle work that will result in visual changes.

// Triggers a visual change
document.querySelector('div').style.top = document.body.scrollTop + 'px';

Style calculations#

This is the process of figuring out which CSS rules apply to which HTML elements based on matching selectors. Once rules are known, they are applied, and the final styles for each element are calculated.

Higher specificity increases the computational cost for the browser to locate matching elements.

Layout#

Once the browser knows which rules apply to an element it calculates the position and size of each element on the page based on the style and content. It determines how elements should be arranged relative to each other within the document flow. The web's layout model means that 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 starts to fill pixel by pixel on the screen. It involves drawing out text, colors, images, borders and shadows. The drawing is typically done onto multiple surfaces, often called layers.

Composite#

The composite stage involves combining the painted layers to create the final visual representation of the web page. It takes into account the stacking order of elements, transparency, and blending modes. The composite operation brings together the various layers to produce the pixel values that will be displayed on the screen.

Each of these parts of the pixel pipeline represents an opportunity to introduce jank in animations or delay the painting of frames even for discrete visual changes to the user interface.

CSS Triggers: When you change a CSS property value, the browser needs to reflect your change. Some values change the layout of the page. For instance, a change in width requires the browser to update layout, then paint any pixels that have changed, then composite them together. That's a lot of work. Some CSS properties can omit these steps. For instance, a change in background-image doesn't require any layout changes, but does require paint and composite.

In summary, understanding how the browser's pixel pipeline works helps developers to enhance performance and create smoother user experiences.