Mastering Web Performance: Understanding the Pixel Pipeline

As web developers, and especially for those of us who specialize in frontend development, it is essential to understand how browsers work, the communication protocol on the web, web accessibility, and more.

In this case, I’m sharing something to keep in mind to improve the performance of our websites and thus enhance the user experience. This is about the Pixel Pipeline.

What is the Pixel Pipeline?

The Pixel Pipeline is a process that describes how web browsers convert HTML, CSS, and JavaScript into visual elements displayed on the screen

There are five main areas you should know and consider in your work as a web developer. These five areas are what you have, and each one represents a key point in the pixel pipeline to the screen:

JavaScript: JavaScript is typically used to handle work that will result in visual changes to the user interface. For example, this could be jQuery's animate function, sorting a dataset, or adding DOM elements to the page

Style calculations: This is the process of figuring out which CSS rules apply to which HTML elements based on matching selectors. For example, .headline is an example of a CSS selector that applies to any HTML element with a class attribute value that contains a class of headline.

Layout: Once the browser knows which rules apply to an element it can begin to calculate the geometry of the page, such as how much space elements take up, and where they appear on the screen.

Paint: Painting is the process of filling in pixels. It involves drawing out text, colors, images, borders, shadows, and essentially every visual aspect of the elements after their layout on the page has been calculated.

Composite: Since the parts of the page were potentially drawn onto multiple layers, they need to be applied to the screen in the correct order so that the page renders as expected.

So, knowing the above, we can understand the resource costs for animations where we resize an element, which will involve going back to the Layout process, then to the Paint process, and finally to the Compose process.

On the other hand, creating animations that involve changing the text color or the background color of an element will only require going to the Paint process and then moving on to the Compose process.

Recommendations to improve your website's performance and enhance user experience

i) Try to avoid creating too many animations whenever possible.
ii) If you want animations, limit yourself to the transform and opacity properties when animating, as these properties will only need to go through the Compose process, which is the last step of the Pixel Pipeline. For example: When animating a button with the hover pseudo-class, it’s better to use opacity rather than changing its background color.
iii) If we want to move an element as part of an animation, it’s better to use 'will-change' or the 'transform' property with its translate values.

Sources I based this post on:
https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count?hl=es
https://web.dev/articles/rendering-performance

Free course on Browser Rendering Optimization taught by Paul Lewis, an expert engineer in all things related to performance and the creator of Lighthouse (Google Lighthouse is an open-source automated tool for measuring the quality of web pages), a tool within the Chrome DevTools:
https://www.udacity.com/course/browser-rendering-optimization--ud860

The above is the detailed content of Mastering Web Performance: Understanding the Pixel Pipeline. For more information, please follow other related articles on the PHP Chinese website!