Summary of Life of a Pixel

00:00:00 - 00:45:00

This talk presents the entire rendering pipeline, from content creation to pixel output, in 45 minutes. It covers what content is, how it's represented in the browser, and why certain steps are there. The talk also discusses Chrome's security model, and Blink, Chrome's rendering engine.

• 00:00:00 This talk presents the entire rendering pipeline, from content creation to pixel output, in 45 minutes. It covers what content is, how it's represented in the browser, and why certain steps are there. The talk also discusses Chrome's security model, and Blink, Chrome's rendering engine.
• 00:05:00 The first step in rendering a page is to build an object model based on the hierarchy of HTML tags. This process is called the document object model (DOM). Next, the DOM is used to access the rendering engines.
• 00:10:00 Chrome's "Style Engine" resolves conflicts among different style rules, and provides computed styles for each element in a document. This " Style Resolution Walk " examines the dom tree to find the computed style for each element, and displays it in the Developer Tools Tab.
• 00:15:00 The video explains how layout works in a web page. Layout is performed on a separate tree, which is based on a flat layout traversal. The layout engine is currently being rewritten, and currently uses legacy layout objects alongside ng-layout objects.
• 00:20:00 With the new "ng" engine, layout objects are stored separately from inputs and outputs, making it easier to reason about the algorithm and quicker to build new layout algorithms. The layout results are actually a new tree called the "fragment tree." Each node in the fragment tree describes the physical geometry of a rectangular fragment of the element.
• 00:25:00 The video discusses how paint operations are turned into pixels onscreen, and how skia abstracts the underlying graphics hardware.
• 00:30:00 The video discusses how a pixel-based rendering pipeline works, and how compositing helps to optimize the process. The pipeline is divided into stages, and each stage is responsible for a specific task. When an event occurs that requires the rendering of a particular section of the page, the corresponding stage is activated and begins processing the required data. If the stage is unable to handle the event, it passes the input on to the next stage.
• 00:35:00 The layer tree is a hierarchy of layers that are created from the layout tree. Paint layers are like candidates for layer promotion and are created as part of the pre-paint stage. The compositor divides the layer into tiles and schedules them in raster tasks. When the compositor rasters a layer, it also rasters the tiles that are in or near the viewport. When the user zooms in or out, the compositor updates the tiles that are in or near the viewport first. Lastly, the compositor generates draw quads, which are instructions to draw a layer.
• 00:40:00 The video describes the life cycle of a pixel on a computer screen, from the time a web page is rendered to the time the pixels are displayed to the user. The video covers the following topics: the renderer process, the compositor thread, the property trees, the tiles, the rasterization process, the rasterization queue, the rasterization thread, the compositor frame, the pending tree, the active tree, the command buffer, the skia library, the deferred display list, the skia back end, and the graphics calls.
• 00:45:00 The speaker discusses some of the complexities of the Chrome rendering pipeline, and how the chromium project is working to simplify it. He also mentions some potential improvements that could be made to the layout and paint architectures. Finally, he asks for questions.