This document is a personal research note on the Chromium rendering pipeline. It introduces some basic knowledge of Chromium and the main process of the rendering pipeline.
Recommended reading for subsequent articles in this series:
It is recommended to read this article on Airing Notes, which has adapted a special note layout for better reading experience.
Introduce to Blink#
Blink is the rendering engine for the web, used by Chromium and Android Webview.
Blink includes the following features:
- Implements web platform specifications (HTML standards), including DOM, CSS, and WebIDL.
- Embeds V8 to run JavaScript.
- Requests resources through the underlying network stack.
- Builds the DOM tree.
- Computes styles and layouts.
- Embeds Chrome Compositor for drawing.
You can read How Blink works for more knowledge about Blink.
From a code structure perspective, "Blink" refers to the code under the directory //third_party/blink/.
From a project perspective, "Blink" refers to the project that implements web platform features. The code that implements these web features is distributed in //third_party/blink/, //content/renderer/, //content/browser/, and other related dependencies.
Renderer architecture overview#
In this article, we mainly introduce the rendering pipeline. The code for the rendering pipeline is located under //third_party/blink/renderer, and the directory structure is as follows:
- controller/: Some high-level libraries that use core/ and modules/, such as the frontend of devtools.
- core/ and bindings/core: core/ implements features closely related to the DOM. bindings/core is part of core/, and the bindings directory is independent because it is strongly related to V8.
- modules/ and bindings/modules: modules/ implements some features unrelated to the DOM, such as WebAudio, IndexDB, etc. bindings/modules/ is part of modules/, and the bindings directory is independent because it is strongly related to V8.
- platform/: A collection of low-level features of Blink, separated from the large core/, including geometry and graphics-related features.
- extensions/
- public/web
- public/platform
- public/common
- //base: Chromium's base library. For the source code interpretation of the base library, see Chromium //base
- //cc: Chromium composite
- V8: JavaScript interpreter
Renderer processes#
Chromium has one browser process and N sandbox renderer processes, with Blink running in the renderer processes. Communication between the browser and renderer processes is implemented by Mojo.
In the past, inter-process communication used Chromium IPC, and there is still a lot of code that uses IPC.
The Blink renderer processes model is shown in the following diagram:
The renderer process has a main thread, multiple worker threads, a compositor thread, and a raster thread.
Almost all major activities in Blink occur in the main thread, such as JavaScript calls, DOM parsing, CSS styling and layout calculations. Therefore, the architecture of Blink is considered to be primarily single-threaded.
Rendering Pipeline#
Goals#
The goal of the rendering pipeline is to render WebContent on the screen. It processes the content of HTML through multiple stages and finally uses OpenGL to rasterize the HTML content and output it to the screen through hardware drivers.
It is important to note that WebContent refers to the area in the following diagram, which is the content of HTML and does not include the browser shell:
In addition, the rendering pipeline is designed with efficient data structures to handle updates to the rendering content.
Pipeline#
The Blink rendering pipeline is shown in the following diagram:
"impl" = compositor thread.
This diagram is from Life of a pixel. Although it describes the key processes of the pipeline, it is not complete. It is also not accurate, for example, the Raster stage runs on a dedicated Raster thread, not the Compositor thread.
Therefore, combining the workflow of cc and viz, the following diagram is redrawn:
The complete rendering pipeline goes through the following stages:
- Parsing
- Style
- Layout
- Compositing
- Paint
- Commit
- Tiling
- Raster
- Activate
- Submit
- Draw
- Display
The first half of the rendering pipeline is performed in the Renderer process. The 1-5 stages of the rendering pipeline run in the Main thread, which is the responsibility of Blink. The 6-10 stages, except for Raster, run in a dedicated Raster thread. The other processes are performed in the Compositor thread, which is the main content of cc. The data source of cc is generated by Paint. The latter half of the rendering pipeline is performed in the GPU process, and the cross-process steps are handled by viz.
In the subsequent articles, we will analyze how Chromium works in each stage of the rendering pipeline.