preface

Study notes for the Life of a Pixel presentation. The browser rendering process is extremely complex and the presentation is extremely fast, so please point out any errors.

Content

All of the front-end code is called Content, such as HTML, JS, CSS, images, videos, etc.

The Content namespace contains everything that’s in the yellow box on the Chromium code architecture. This is represented in the Chromium code by the WebContent class, which encapsulates the rendering process.

Chromium

Chromium is an open source project from Google. Chrome is based on Chromium code, Edge is based on Chromium code, Opera is based on Chromium code.

Blink browser layout engine

Blink is a browser typography engine that’s part of Chromium. Blink is a subset of the rendering process code in Content.

To sum up: WebContent class is responsible for rendering Content in Chromium, and the rendering process is implemented by Blink

First render stage

Parsing HTML -> style -> Layout -> Compositing update -> paint -> commit -> tiling -> Raster -> draw quads -> display

open gl

Browsers cannot render web pages to the screen on their own; they need to use graphics libraries provided by the underlying operating system, such as the OpenGL API. But OpenGL doesn’t know anything about Html or Css, so you have to go through the Web Content of the browser and you have to convert the Html or Css into something that OpenGL can recognize, and then render it on the screen through OpenGL.

After rendering to the screen, you need to listen and respond, JavaScript, user input, asynchronous loading, animation, scrolling, scaling, and then render updates. For some updates, there is no need to go through the entire rendering process from scratch.

parsing

From the web request, the first thing you get is an HTML file, so the starting point for browser rendering is the HTML parser. HTML also introduces CSS, JS, images and other resources that browsers load.

HTML file parsing process:

HTML file -stream-> HTMLDocumentParser -> HTMLTreeBuilder -> DOM

DOM (Document Object Model) Document Object Model

The DOM is an HTML-based inverted tree structure that serves two purposes:

  1. As an internal representation of Chrome
  2. The DOM tree is wrapped by the V8 engine. Expose the update, query API to JS.

style

The CSS style sheet parsing process:

CSS Style Sheet -> CSSParser (CSS parser) -> Style Rule Model

How do CSS styles work with the DOM?

Calculate the Style of each DOM based on the parsed Style rules and the browser’s default Style. Style and attribute values are stored in a large ComputedStyle object. The ComputedStyle object is a mapping of attributes and attribute values. The ComputedStyle object mounts elements and should have different styles for different elements.

layout

Once you’ve built the DOM and done the styling calculation, you need to determine the geometry of all the elements (the area they occupy and the coordinates). This layout information is called a LayoutObject object.

Layout objects are stored in the layout tree and associated with the DOM. Different nodes correspond to different layout classes. But the different layout classes inherit from the parent class LayoutObject.

LayoutObject objects and DOM elements do not correspond one to one. For example, when the DOM element is display: None, there is no LayoutObject object.

compositing update

The input synthesis phase, which we will discuss below, is 🍵

paint

According to the LayoutObject, the draw operation records the draw operation in a display items list.

What is a draw operation? For example, draw a red rectangle in the specified area based on the LayoutObject. This is the draw operation.

Each LayoutObject (LayoutObject) corresponds to multiple items to display, because different parts may be involved in drawing. Currently, only the drawing operation is recorded, and no drawing operation has been performed. The order of drawing is controlled by the Z-index property.

Commit, tiling

Commit, split phase, we’ll talk about 🍵 below

raster

The actual operation of drawing in the list of items to display is performed by the rasterization process.

Rasterization converts the items to be displayed into a bitmap of color values (the information of the image is recorded in pixels, and the RGBA value of the color information of each pixel is recorded). Bitmap information is stored in memory (usually video memory). The GPU can also rasterize the list of items to be displayed, which we call GPU acceleration. At this point, bitmap information is still stored in video memory and is not output to the screen.

For image information, rasterization decodes the image to obtain bitmap information.

Rasterization is done by calling the OpenGL API through the SKIA library.

SKIA

SKIA is an open source graphics engine, SKIA can achieve rasterization, PDF output, GPU acceleration.

draw quads

In the draw Quads phase, we will move on to 🍵

Gpu (Display stage)

SKIA generates OpenGL calls, which are transmitted to THE GPU process in the form of command cache. The GPU receives the command cache and generates GL calls. The pixels are rendered onto the screen.

Update render phase

Commit -> tiling -> raster -> draw quads -> display

Rendering is not static, JavaScript, user input, asynchronous loading, animation, scrolling, scaling, all change rendering. Executing the rendering process from scratch can be expensive. If it drops below 60fps per second, it gets stuck.

Optimize 1: Invalidation

To avoid performing the entire rendering process from scratch, a common optimization method is to mark what has changed and reuse what has not. For example, if a node needs to be recalculated, the next frame only recalculates the node’s style.

Optimization 2: Enter: Compositing Input

Another Chrome optimization tool is layering

  1. Split the page into layers, each of which can be rasterized separately.
  2. Separate threads are used for layer composition

The Layers stratified

Animation, scrolling, scaling, and manipulation all create layers. A separate composite thread will handle the scrolling input operation separately.


while(true) {}Copy the code

When we block the main thread with JS, the page can scroll even though the main thread is blocked, due to the presence of a separate composite thread that handles the user’s scroll operation

Layers tree Layer tree

The layer storage structure is also in the form of a tree, which is indirectly based on the layout tree.

Compositing Update Input compositing

The Compositing Update phase occurs after the Layout phase and before the Paint phase. The page is layered and each layer is drawn separately. The display items list exists in the drawing stage. In fact, different layers have different display items list.

commit

After the drawing is complete, update the state of the composite thread layer by synchronizing the state of the main thread, and finally synchronize back to the main thread

tiling

Raster converts the display items list to a bitmap, but sometimes the layers are too big, and Raster is an expensive step. The compositing thread splits the layers into blocks, which are the basic unit of Raster. The closer it is to the viewport, the blocks are created first and rasterized first.

The blocks are rasterized in a separate Raster thread

draw

After drawing all the blocks, the synthesizer thread will generate Draw Quads, which are the instructions for drawing blocks, wrapped in a synthesizer frame object and submitted to the browser process.

display

Browser process, runs the display synthesizer component, synthesizer component calls OpenGL draw Draw Quads, the last pixel is visible on the user’s screen.

reference

  • SKIA
  • Bitmap
  • Chromium
  • Blink
  • Life of a Pixel
  • Life of a Pixel PPT
  • what-forces-layout