Introduction to browser processes and threads

This article brings you an introduction to browser processes and threads. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Process

The process is the smallest unit of CPU resource allocation.

Multi-process: Multi-process refers to if two or more processes are allowed to be running in the same computer system at the same time. The benefits of multiple processes are obvious. For example, you can open an editor and type code while listening to music, and the processes of the editor and the music-listening software will not interfere with each other at all.

The browser is multi-process. The browser process mainly includes the following types:

1. Browser process: the main process of the browser ( Responsible for coordination and main control)

2. Third-party plug-in process: Each type of plug-in corresponds to a process, which is only created when the plug-in is used

3. GPU process: at most one, used for 3D drawing

4. #Browser rendering process (kernel) : By default, one process for each Tab page, without affecting each other. Control page rendering, script execution, event processing, etc. (sometimes optimized, for example, multiple blank tabs will be merged into one process)

When browsing the web, open several new ones at the same time Page, this requires opening several browsing windows, but once more than a dozen windows are opened, the entire computer will become slower and slower.

Advantages of multi-process browsers

Avoid page rendering affecting the entire browser

Avoid third-party plug-ins affecting the entire browser

Multiple processes make full use of the advantages of multi-core

It is convenient to use the sandbox model to isolate processes such as plug-ins and improve browser stability

In layman's terms, if the user opens multiple windows, if one of the windows crashes If it is dropped, it will not affect the entire browser, and other interfaces will still run normally

Threads

• A process consists of one or more threads Composition, threads are different execution routes of code in a process;

• Processes are independent of each other, but the memory space of the program (including code segments, Data set, heap, etc.) and some process-level resources (such as open files and signals).

The browser’s rendering process (browser kernel) is multi-threaded and mainly falls into the following categories:

1. GUI thread

2. Javascript engine thread

3. Event trigger thread

4. Timer thread

5. Network request thread

GUI thread

is responsible for rendering the browser interface HTML elements. When the interface This thread will be executed when repaint is required or reflow is caused by some operation. While the Javascript engine is running the script, the GUI rendering thread is in a suspended state, which means it is "frozen".

Javascript engine thread

Also Called the JS kernel, it is mainly responsible for processing Javascript script programs, such as the V8 engine. The Javascript engine thread is of course responsible for parsing Javascript scripts and running codes.

Javascript is single-threaded

This is due to the mission of the birth of the scripting language Javascript: JavaScript handles user interaction on the page and operates the DOM tree , CSS style tree to present users with a dynamic and rich interactive experience and interactive processing of server logic. If JavaScript is a multi-threaded way to operate these UI DOM, conflicts in UI operations may occur; If Javascript is multi-threaded, under the interaction of multi-threads, the DOM node in the UI may become a critical resource. Suppose there are two threads operating a DOM at the same time, one responsible for modifying and one responsible for deleting, then browsing is required at this time The processor determines how to take effect which thread's execution results. Of course we can solve the above problem through locks. But in order to avoid greater complexity caused by the introduction of locks, Javascript chose single-thread execution from the beginning.

The GUI rendering thread and the JavaScript engine thread are mutually exclusive!

Since JavaScript can manipulate the DOM, if you modify the properties of these elements while rendering the interface (that is, the JavaScript thread and the UI thread run at the same time), the element data obtained before and after the rendering thread may be inconsistent. Therefore, in order to prevent unexpected rendering results, the browser sets the GUI rendering thread and the JavaScript engine to have a mutually exclusive relationship. When the JavaScript engine is executed, the GUI thread will be suspended, and GUI updates will be saved in a queue until the engine thread is idle. is executed immediately.

JS blocking page loading

Since the GUI rendering thread and the JavaScript execution thread are mutually exclusive, when the browser is executing the JavaScript program, the GUI rendering thread will It is saved in a queue and will not be executed until the JS program is completed. Therefore, if the execution time of JS is too long, the rendering of the page will be incoherent, resulting in the feeling that the page rendering and loading are blocked.

Timing trigger thread

The browser timing counter is not counted by the JavaScript engine, because the JavaScript engine is single-threaded. If it is in a blocked thread state, it will affect the accuracy of the timing. Therefore, it is more reasonable to time and trigger the timing through a separate thread. plan.

Event triggering thread

When an event is triggered, the thread will add the event to the end of the pending queue and wait for processing by the JS engine. These events can be from the currently executed code block such as scheduled tasks, or from other threads in the browser kernel such as mouse clicks, AJAX asynchronous requests, etc. However, due to the single-threaded relationship of JS, all these events have to be queued for processing by the JS engine.

Asynchronous http request thread

After XMLHttpRequest is connected, it opens a new thread request through the browser. When the status change is detected, if a callback function is set, The asynchronous thread generates a state change event and puts it in the JavaScript engine's processing queue to wait for processing.

The above is the detailed content of Introduction to browser processes and threads. For more information, please follow other related articles on the PHP Chinese website!