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.