Renderer Process in the modern browser
What is the process
A process can be described as an application’s executing program. It is created when the application is opened
Process and What it controls
| Browser | Renderer | Plagin | GPU |
|---|---|---|---|
| Address bar, bookmarks, back and forward buttons and inner parts:network requests and file access | Network requests and file access | Any plugins used by the website (f.e. flash) | GPU tasks in isolation from other processes |
Render steps
- Parsing
- Construction of a DOM
- Subresource loading
- Style calculation
- Layout
- Paint
- Compositing
- Dividing into layers
- Raster and composite off of the main thread
Parsing
DOM Tree
This markup would be translated to the following DOM tree:
Subresource loading
A website usually uses external resources like images, CSS, and JavaScript. Those files need to be loaded from a network or a cache.
CSSOM
div.error and a.error are selectors. The part inside the curly braces contains the rules that are applied by this ruleset. This structure is defined formally in definition of the ruleset:
CSSOM
From the style file on the left we get CSSOM on the right
Layout
The main thread going over DOM tree with computed styles and producing layout tree
Layout
Box layout for a paragraph moving due to line break change
Painting
Page elements appearing in order of an HTML markup, resulting in wrong rendered image because z-index was not taken into account
Updating rendering pipeline is costly
DOM+Style, Layout, and Paint trees in order it is generated
Rastering
Animation of naive rastering process
Compositing
Animation of compositing (technique to separate parts of a page into layers)
Raster and composite off of the main thread
Raster threads creating the bitmap of tiles and sending to GPU
Raster and composite off of the main thread
Compositor thread creating compositing frame. Frame is sent to the browser process then to GPU