The browser has many functions, such as network request, page rendering, JavaScript execution and Web security, and so on, and these functions are scattered in the various functional components of the browser, more and more scattered, so by learning the browser multi-process architecture to connect these knowledge points is very necessary.

Understand concepts such as parallelism and concurrency, processes and threads before learning about multi-process architecture.

Concurrency and parallelism

  • Concurrency: There are tasks A and B that are completed by switching between them over A period of time. This case is concurrency.
  • Parallel: Again, task A and task B, but the CPU has two cores that can execute both tasks at the same time.

It’s like I’m typing code, and I have a coke in front of me, but I have to finish the code before I can drink the Coke, so I’m neither concurrent nor parallel.

So again, I’m going to type a piece of code, and then I’m going to have a drink of Coke and then I’m going to continue to type, and by switching between typing and drinking coke, I’ve done both of these tasks, and this is called concurrency.

I can write code and drink coke. I can write code and drink Coke at the same time. These two tasks can be executed at the same time.

  • The key to concurrency is the ability to handle multiple tasks, not necessarily all at once.
  • The key to parallelism is the ability to handle multiple tasks at once.

The question is: is it the same time?

Processes and threads

  • Process: A process is a running instance of a program. When a program is started, the operating system creates a block of memory for the program, which is used to store code, running data and a main thread to perform tasks. We call such a running environment a process.
  • Thread: Thread is attached to the process, and the use of multi-thread parallel processing in the process can improve computing efficiency.

The relationship between processes and threads has the following characteristics:

  • A process can contain multiple threads;
  • Threads can share data in a process;
  • The contents of processes are isolated from each other, and data of different processes cannot be shared.
  • Any thread execution error in the process will lead to the crash of the whole process;
  • When a process is shut down, the operating system reclaims the memory occupied by the process.

A Process can also require the operating system to generate another Process to perform different tasks. The system will allocate independent memory for the new Process. The two processes can communicate with each other through Inter Process Communication. Many applications are designed so that if one worker process is slow, restarting that process will not affect the work of other applications.

Multi-process architecture for browsers

Different browsers adopt different architectural patterns and there is no standard, so Chrome is used as an example for this analysis.

Chrome has a multi-process architecture, with a top layer of the Browser process that coordinates the Browser’s other processes.

The latest Chrome browsers include: One main Browser Process, one GPU Process, one NetWork Process, multiple Renderer processes, and multiple Plugin processes The Process).

  • Browser main process: mainly responsible for page display, user interaction, sub-process management, file storage and other functions.
  • Rendering processThe core task is to turn HTML, CSS, and JavaScript into web pages that users can interact with.
    • The typography engine Blink and JavaScript engine V8 both run in this process, and by default Chrome creates a rendering process for each Tab.
    • For security reasons, renderers are run in sandbox mode.
  • GPU process: Handles GPU-related tasks.
    • Chrome uses GPU to draw web pages and UI interfaces, making GPU a common requirement for browsers. Finally, Chrome also introduces THE GPU process in its multi-process architecture.
  • Network process: mainly responsible for the page of the network resource loading, was previously as a module running in the browser process, after independent processing into a separate process.
  • Plug-in process: Is mainly responsible for controlling all the plug-ins used by a web page.
    • Plug-ins are prone to crash, so you need to isolate the plug-in process to ensure that the plug-in process crash does not affect the browser and the page.

You can use the Task Manager function provided by Chrome to view all the processes running in the current browser and the system resources occupied by each process. You can also right-click to view more categories.

The Task Manager panel can be opened by clicking on the top right corner of the browser -> More Tools -> Task Manager or the shortcut Shift + Esc:

The browser adopts multi-process architecture model, through the collaboration between processes to achieve network request, page rendering, JavaScript execution and Web security defense, and improve the stability, fluency and security of the browser.

  • The stability of: Processes are isolated from each other. The failure of one process does not affect other processes.
    • For example, plug-ins are modules that are prone to problems. If they are running in the same process, the plug-in’s accidental crash will cause the entire browser to crash.
  • fluencyNetwork requests, page rendering, JavaScript execution environments, and plug-ins run in separate processes, reducing the possibility of thread blocking.
    • For example, JavaScript is running in the renderer process, so even if JavaScript blocks the renderer process, it will only affect the current rendering page, not the browser and other pages, because other pages’ scripts are running in their own renderer process.
  • securityThe browser restricts the permissions of different processes at the system level.
    • For example, the renderer process is run in the security sandbox, because all the content of the renderer process is obtained through the network, there will be some malicious code to exploit browser vulnerabilities to attack the system, so the code running in the renderer process is not trusted.

However, every coin has two sides. While the multi-process model of the browser improves the stability, smoothness and security of the browser, it also introduces some other problems: higher resource usage and more complex architecture, for example.

For both of these issues, the Chrome team has been looking for an elastic solution that can address both high resource usage and complex architecture issues.

conclusion

  • The key distinction between concurrency and parallelism is whether you are working on multiple tasks at the same time.
  • A process is an instance of running a program. Threads are attached to the process. Using multi-thread parallel processing in the process can improve computing efficiency.
  • The current Chrome browser is multi-process architecture, consisting of one main browser process, one GPU process, one web process, multiple renderers, and multiple plug-in processes.