The browser’s rendering process

Page rendering process: HTTP request phase HTTP response phase Browser rendering phase

I’m going to focus on the third stage here

Several definitions are explained as follows: process: each program opened by process: Thread: task stack running in the program memory stack provides an environment for working event loop: Event loop refers to dom annotation task queue to waiting task queue to find the task, take the task to the main task queue execution, cycle this processCopy the code

Microtask is superior to macro task execution

Parse Html to generate A DOM tree

After the browser takes the server code, the browser opens a stack of memory in the memory to provide an environment for the code to execute. Assign a main thread to execute and parse the code line by line

Line by line from top to bottom, the first top-down walk only generates the DOM tree

2. Parse CSS to generate csSOM tree

The steps are the same for dom trees

3. Dom tree and CSSOM tree are combined to generate rendering tree

4. Layout backflow

From the generated render tree, calculate the exact location size of the device when it is in use

V. Repainting

The absolute pixels of nodes are obtained from the rendered tree and the geometry information obtained by backflow

Note:

1. There must be backflow and redraw when rendering the browser for the first time (this is easy to understand)

2, reflux will occur redraw redraw does not necessarily occur reflux

Page rendering

Send the pixels to the COMPUTER’s GPU (graphics card) to draw the page.

This is the most common browser rendering process