When a page is opened, the browser will open at least four processes: the browser main process, the Gpu process, the rendering process, and the network process. And if it is a TAB (the same site page) will also share a rendering process. Here are the details of the Chrome process:

Browser rendering flow chart:

Next, I will focus on the rendering process.

The rendering process is multi-threaded, it mainly contains the following six threads: GUI thread, JS engine thread, timer trigger thread, event trigger thread, asynchronous HTTP request thread, composite thread, IO thread.

GUI rendering thread

Render the browser interface, parse HTML, CSS, build DOM and RenderObject trees, layout and draw, etc. This thread executes when the interface needs to be repainted or reflow due to some operation.

Note ⚠️ : the GUI rendering thread is mutually exclusive with the JS engine thread, the GUI thread is suspended while the JS engine is executing, and GUI updates are stored in a queue until the JS engine is idle and executed immediately.

JS engine thread

The JS engine thread is responsible for parsing the Javascript and running the code. The JS engine waits for a task to arrive in the task queue and then processes it. There is only one JS thread running the JS program in a Tab (renderer process) at any time

Note: The GUI rendering thread and the JS engine thread are mutually exclusive, so if the JS engine takes too long to execute, it will cause the rendering of the page to be incoherent and block the page rendering load.

Event-triggered thread

Belongs to the browser, not the JS engine, and is used to control the event loop. When JS engine execution code blocks such as setTimeOut (can also be other threads from the browser kernel, such as mouse clicks, AJAX asynchronous requests, etc.), added to the event thread will correspond to the task, when the corresponding event in accordance with the trigger condition is triggered, the thread will add events to the pending queue the next morning, waiting for the JS engine processing.

The main thread receives the click event and passes the information to the IO thread, which wraps the click event as a task and adds it to the event thread. When the corresponding task meets the triggering condition, the task is added to the message queue for the JS engine to process.

Note ⚠️ : due to the single-threaded nature of JS, all events in the queue are queued for the JS engine to process (when the JS engine is idle).

Timed trigger thread

The thread where the legendary setInterval and setTimeout reside

The browser timing counter is not counted by the JavaScript engine (because the JavaScript engine is single-threaded, if you are in a blocked thread state, it will affect the accuracy of the timing)

Therefore, the timer is timed and triggered by a separate thread (after the timer is finished, it is added to the event queue, waiting for the JS engine to idle).

Note that the W3C states in the HTML standard that any interval of less than 4ms in setTimeout is required to count as 4ms. (That is, 0ms is also 4ms)

Asynchronous HTTP request threads

After the XMLHttpRequest is connected, a new thread request is opened through the browser

When a state change is detected and a callback function is set, the asynchronous thread generates a state change event and places the callback in the event queue. This is then executed by the JavaScript engine.

Synthesis of the thread

Browser rendering process: HTML to DOM, CSS to CSSOM, they form the render tree, and then enter the layout phase, layering, drawing, partitioning, rasterization, composition.

GUI rendering thread: HTML to DOM, CSS to CSSOM, they form the render tree, and then enter the layout phase, layering, drawing

Composite thread: divides the drawn instruction list into 256256 or 512512 blocks, and then puts the blocks into the rasterized thread pool and turns them into bitmaps.

Executed after the GUI rendering thread to convert the strip drawing list generated by the GUI rendering thread into a bitmap.

IO thread

It is used to communicate with other processes. For example, after downloading the network process, it will send the information to the IO thread for communication through IPC. When the user clicks the page button, the browser main thread sends this information via IPC to the IO thread. The IO thread wraps this time as a task and adds it to the message queue for the event loop to process.