Before the browser rendering process and thread a piece, struggle for a long time, because I don’t understand completely what is threads and processes, and if you’re like me, also did not know before, or is not very clear what is the thread, what is a process, suggest to see browser multi-process architecture, after to clear up the threads and processes, read this article could get twice the result with half the effort.

GUI rendering thread

Responsible for rendering browser interfaces, parsing HTML, CSS, building DOM trees and RenderObject trees, layout and drawing, etc

This thread executes when the interface needs to be repainted or Reflow due to some action

The GUI rendering thread and the JS engine thread are mutually exclusive, the GUI thread is suspended (equivalent to frozen) while the JS engine is executing, and GUI updates are stored in a queue until the JS engine is idle

JS engine thread

Also known as the JS kernel, responsible for handling javascript scripts (V8 engine)

The JS engine thread is responsible for parsing javascript scripts and running code

The JS engine is waiting for a task to arrive and then processing it, and there’s only one JS thread running the JS program in one renderer process anyway

Since the GUI rendering thread and the JS engine thread are mutually exclusive, if the JS execution time is too long, the page rendering will be incoherent and the page rendering load will block

Event trigger thread

Belongs to the browser, not the JS engine, and is used to control the event loop

When the JS engine executes code, such as setTimeout (or other threads from the browser kernel, such as mouse clicks, Ajax requests, etc.), it adds the corresponding task to the event thread

When the corresponding event meets the trigger condition is triggered, the event thread will add the event to the end of the queue of events to be processed, waiting for the JS engine to process

Due to the single-threaded nature of JS, the events in the queue must be queued up for the JS engine to process (when the JS engine is idle).

Timer trigger thread

The thread of setInterval and setTimeout

Browser timing counters are not counted by the JS engine (since JS is single-threaded, blocking would affect the accuracy of the count)

Separate thread to time and trigger timing (when the timing is complete, add to the event queue, wait for the JS engine to be idle)

W3C stipulated in the HTML standard that setTimeout interval less than 4ms should be counted as 4ms

Asynchronous HTTP request threads

The XMLHttpRequest opens a thread request through the browser after the connection

When a state change is detected, if a callback function is set, the asynchronous thread will generate a state change event, put the callback into the event queue, and then the JS engine will execute it

This is the main thread of the main browser rendering process, but not all of them. If you encounter problems, please feel free to comment.