Browser multi-process architecture

background

Recently, I have been learning some knowledge about how browsers work. I will take some notes about browsers. When we opened a page using Chrome, from the “Options” menu in the upper right corner of Chrome, select the “More Tools” submenu and click “Task Manager” we saw Chrome started several processes. Curious, I decided to check it out.

Process & Thread

For those of you who are not familiar with process threads, take a look at the operating system threading model

CPU & GPU

The CPU is the brain of the computer and is responsible for various tasks. In the past, most cpus were single-chip, with the core sitting on the same chip. The updated CPU can support multi-core, greatly enhanced computing power. The latest cpus are capable of 10 cores and 20 threads.

The GPU is another part of a computer that, unlike the CPU, is better at using multiple cores to handle a single task simultaneously. As named, gpus were originally used to process images. This is why it is possible to render page content faster and more smoothly using a GPU. With the development of Gpus, more and more computing tasks can also be processed using Gpus. Some people even say that GPU is the great contribution of artificial intelligence, it can be seen that GPU is no longer only used for image processing.

Single-process browser

Prior to 2007, browsers on the market were single-process, and their architecture is shown below:

Disadvantages of single-process browsers

  1. Since the browser is a single process, a failure of a task on one of the threads can cause the browser to crash.
  2. Multiple tasks related to the interface are concentrated in a single thread. If a task is blocked, the display of the entire interface will be blocked, resulting in the whole browser being stuck.
  3. Single-process browsers at the time had no concept of a sandbox, and any task running in the browser could pose a threat to the operating system.

Current multi-process architecture browser

The latest Chrome includes one main Browser process, one GPU process, one NetWork process, multiple rendering processes, and multiple plug-in processes. The diagram below:

The single-process browser issue has been resolved

  1. When there is a problem with one renderer or plugin process, the impact is when there is only a problem with that page or plugin, other pages are not affected.
  2. When a task in a renderer is blocked, or a memory leak occurs, the effect is only on the page that the renderer is working on, and other pages and browsers are not affected.
  3. As for the security issue, the browser uses the renderer process or part of the operating system plug-in process into theThe sandbox. This prevents the browser from accessing external resources, posing a threat to the operating system.

Multi-process detailed solution

  1. Browser process. It is mainly responsible for interface display, user interaction, sub-process management, and storage.
  2. Rendering process. The core task is to turn HTML, CSS, and JavaScript into web pages that users can interact with. Both the typography engine Blink and JavaScript engine V8 run in this process. By default, Chrome creates a rendering process for each Tab Tab. For security reasons, renderers are run in sandbox mode.
  3. GPU process. Chrome had no GPU process when it was first released. The original intention of using GPU was to achieve 3D CSS effect, but later the UI interface of web page and Chrome were drawn on GPU, which made GPU become a common requirement of browser. Finally, Chrome has introduced GPU processes on top of its multi-process architecture.
  4. Network process. It is responsible for loading web resources on the page. It used to run as a module in the browser process until recently, when it became a separate process.
  5. Plug-in process. It is mainly responsible for the running of plug-ins. Plug-ins are prone to crash. Therefore, plug-ins need to be isolated through the plug-in process to ensure that the plug-in process crash does not affect the browser and page.

disadvantages

  1. Adopting a multi-process architecture leads to a higher resource footprint
  2. More complex to the architecture, the current design module coupling is high, poor scalability

In the future

In 2016, Chrome officially used the idea of “Services Oriented Architecture” (“SOA”) to design the new Architecture. The original modules are reconstituted into separate services, each of which can be run in a separate process. Services must be accessed using defined interfaces and communicated through IPC, building a more cohesive, loosely coupled system that is easy to maintain and expand. Chrome also offers a flexible architecture that allows basic services to run in multiple processes on powerful devices, but on resource-constrained devices, Chrome can consolidate many services into one process to save memory.

Refer to the article

How browsers work and practice (Geek Time)