Explore the internal mechanism of modern browser (I)

Time:2022-5-7

This article is translated fromInside look at modern web browser (part 1)
Original author:Mariko Kosaka
Translation:Gomi

CPU, GPU, memory and multi process architecture

In this series, we will go deep into the specific details of Chrome browser rendering process from the perspective of high-level architecture. If you want to know how the browser turns your code into a usable website, or you don’t know why you are advised to use specific technologies to improve the performance of the website, this series is for you.

As part 1 of this series, we will learn about core computing terms and chrome’s multi process architecture.

If you are familiar with CPU / GPU and process / thread, you can skip toBrowser architecture

1、 The core of computer: CPU and GPU

In order to understand the operating environment of the browser, we need to understand some computer components and their functions.

CPU

The first isCentral Processing Unit(CPU)。 CPU can be regarded as the brain of computer. A CPU core, depicted in this figure as an office employee, can handle many different tasks one by one when tasks appear. It can handle everything from math to art and know how to reply to customer calls. In the past, most CPUs were single-chip. The kernel is like another CPU living in the same chip. In modern hardware, you usually get multiple cores to provide more computing power for your mobile phone and laptop.
Explore the internal mechanism of modern browser (I)
Figure 1: four CPU cores as office workers sit at each desk to process incoming tasks

GPU

Graphics Processing Unit(GPU) is another part of the computer. Unlike CPU, GPU is good at handling simple tasks, but it can span multiple cores at the same time. As the name suggests, it was originally developed for processing graphics. This is why “use GPU” or “GPU support” in the graphics context (which may refer to the GPU option of the computer) is related to fast rendering and smooth interaction. In recent years, with the development of GPU accelerated image processing technology, more and more computing has become possible on GPU.
Explore the internal mechanism of modern browser (I)
Figure 2: many GPU cores with wrenches show that they can only handle limited tasks

When you start an application on a computer or mobile phone, CPU and GPU are the core of the driver. In most cases, the application will run on the CPU and GPU according to the mechanism provided by the operating system.
Explore the internal mechanism of modern browser (I)
Figure 3: three tier computer architecture. The machine hardware is at the bottom, the operating system is in the middle, and the application program is at the top

2、 Executing programs on processes and threads

Another concept to master before delving into browser architecture is process and thread. A process can be described as an application’s executor. A thread is a thread that exists inside a process and executes any part of its process program.

When you start an application, the computer creates a process. The program may create threads to help it work, but this is optional. The operating system provides a usable memory “tablet” for the process, and all application states are saved in the private memory space. When you close the application, the process will also disappear and the operating system will free up memory.
Explore the internal mechanism of modern browser (I)

Figure 4: process as a bounding box, thread as an abstract fish swimming in the process

Explore the internal mechanism of modern browser (I)
Figure 5: process diagram of using memory space and storing application data

A process can ask the operating system to start another process to run different tasks. When this happens, different parts of memory are allocated for the new process. If two processes need to communicate, they can use interprocess communication (IPC). Many applications are designed to work in this way, so if a process does not respond, it will not affect other processes running on different applications and then restart.
Explore the internal mechanism of modern browser (I)
Figure 6: schematic diagram of independent process communicating through IPC

3、 Browser architecture

So how to use processes and threads to build web browsers? Well, it may be a process with many different threads, or it may be many different processes, several of which communicate through IPC.
Explore the internal mechanism of modern browser (I)
Figure 7: different browser architectures in the process / thread diagram

It should be noted here that these different architectures in the figure are implementation details, and there is no standard specification on how to build a web browser. The construction of one browser may be completely different from that of another.

Next, we will use the latest architecture of chrome described in the figure below.

At the top is the coordination of the browser process with other processes that handle different parts of the application. For renderer processes, multiple processes are created and assigned to each web page. Until recently, chrome provided a process for each web page if possible; Now chrome tries to provide its own processes for each site, including iframes ([site isolation](https://developers.google.com…))
Explore the internal mechanism of modern browser (I)
Figure 8: multi process architecture of chrome. Multiple layers are displayed under the renderer process to indicate that chrome runs multiple renderer processes for each tab

4、 Each process corresponds to the controlled part

The following table describes the contents of each chrome process and its control:

Browser process Controls the part of the “Chrome” application, including the address bar, bookmarks, back and forward buttons. It also handles privileged parts of the browser that are not visible, such as network requests and file access
Renderer process Controls the display of any displayed content within a web page
Plugin process Control any plug-ins used by the website, such as flash
GPU process Handle GPU tasks independently of other processes. It is divided into different processes because the GPU processes requests from multiple applications and draws them on the same surface.
Browser extension process Control browser plug-ins, such as oil monkey, Vue devtools, etc
Utility process Control the process of some other utilities, such as V8 agent parsing tool, audio service, etc

Explore the internal mechanism of modern browser (I)
Figure 9: different processes pointing to different parts of the browser UI

5、 Benefits of multi process architecture in Chrome

Previously, I mentioned that chrome uses multiple renderer processes. In the simplest case, you can imagine that each web page has its own renderer process. Suppose you open three web pages, each of which is run by a separate renderer process. If a page becomes unresponsive, you can close the unresponsive page and continue to the next step while keeping other pages active. If all web pages are running in one process, when a web page does not respond, all web pages do not respond, which is tragic.

Explore the internal mechanism of modern browser (I)
Figure 10: chart showing multiple processes running each tab

Another benefit of dividing the browser’s work into multiple processes is security and isolation. Because the operating system provides a method to limit the process permissions, the browser can sandbox some processes from some functions. For example, Chrome browser restricts access to files for processes that process user input, such as renderer processes.

Because processes have their own private memory space, they usually contain copies of the common infrastructure (for example, V8, which is chrome’s JavaScript engine). This means more memory usage because they cannot be shared like threads in the same process. To save memory, chrome limits the number of processes it can start. This limit depends on how much memory and CPU capacity your device has, but when chrome reaches its limit, it will start running multiple web tabs from the same site in one process.

6、 Save more memory – service in Chrome

The same method applies to browser processes. Chrome is undergoing architectural changes to run each part of the browser program as a service, so that it can be easily split into different processes or aggregated into one.

The general idea is that when chrome runs on powerful hardware, it may split each service into different processes to provide higher stability, but if it is on a resource constrained device, chrome will integrate the services into one process to save memory. Prior to this change, similar integration process methods have been used on platforms such as Android to reduce memory usage.

Explore the internal mechanism of modern browser (I)
Figure 11: Chrome’s service diagram moves different services to multiple processes and a single browser process

7、 Renderer – site frame isolation

Site isolation is a recently introduced feature in chrome that runs a separate renderer process for each cross site iframe. We have been talking about a renderer process for each web page tab, which allows cross site iframe to run in a single renderer process and share memory space between different sites. It seems OK to run a.com and b.com in the same renderer process. Homology strategy is the core security model of network; It ensures that one site cannot access the data of other sites without consent. Bypassing this strategy is the main target of security attacks. Process isolation is the most effective way to separate sites. Due to the emergence of meltdown and spectre (security vulnerabilities), we need to use different processes to isolate the site. Since chrome 67, site isolation is enabled on the desktop by default, and each cross site iframe in the web page will get a separate renderer process.
Explore the internal mechanism of modern browser (I)
Figure 12: schematic diagram of station isolation; Multiple renderer processes pointing to iframes within the site

Enabling site isolation is an engineering work for many years. Site isolation is not as simple as assigning different renderer processes; It fundamentally changes the way iframes communicate with each other. Running iframe pages from different processes and opening devtools means that devtools must perform background tasks to make it look like seamless integration. Even running a simple Ctrl + F to find words in the page means searching in different renderer processes. This is why browser engineers call the release of “site isolation” an important milestone!

8、 Summary

In this article, we introduce the browser architecture from a higher perspective and introduce the benefits of multi process architecture. We also introduced the service and site isolation in chrome, which is closely related to the multi process architecture. In the next article, we will begin to explore in depth what happens between these processes and threads in order to successfully display a website.

Recommended Today

Implementation of singleton pattern and singleton pattern prototype class in JS

Singleton mode Definition of singleton mode:Ensure that there is only one instance of a class and provide a global access point to access it Understand the function of singleton mode through a simple example: class Div { constructor() { return document.createElement(“div”); } } btn.addEventListener(“click”, function (event) { const div = new Div(); document.body.appendChild(div); }); Now […]