Peeping into modern browser architecture (I)

Time:2021-8-24

preface

This article is the author’s translation of the inside look at modern web browser series written by Mario Kosaka. The translation here does not refer to literal translation, but expresses the meaning the author wants to express in combination with his personal understanding, and will try to supplement some relevant contents to help everyone better understand.

CPU, GPU, memory and multi process architecture

In this4 series of tutorialsInside, I will start with the high-level architecture of Chrome browser and go deep into the specific details of the page rendering pipeline. If you want to know how the browser turns the code you write into a usable website, or you don’t know why some specific code writing methods can improve the performance of the website, you come to the right place. This article is for you.

As the first article in this series, we’ll first look at some key issuesComputer terminologyAnd chromeMulti process architecture

The core of the computer – CPU and GPU

To understand the operating environment of the browser, we must first understand some computer components and their functions.

CPU

The first thing we want to say is the computer brain – CPU(Central Processing Unit)。 A CPU is a chip in a computer with one or more cores on it. We can compare a core of CPU to an office workerPowerful, we know astronomy from the top and geography from the bottom. We can play piano, chess, calligraphy and painting everywhere,It can process the tasks assigned to it serially one by one。 Long ago, most CPUs had only one core, but in today’s hardware devices, CPUs usually have multiple cores, because multi-core CPUs can greatly improve the computing power of mobile phones and computers.
Peeping into modern browser architecture (I)
< p align = “center” > the four CPU cores happily handle the tasks assigned to them one by one on their respective stations</p>

GPU

Graphics processor – or GPU(Graphics Processing UNIT) is another important part of computer. Unlike the powerful CPU core, a single GPU core can only handle some simple tasks, but it is better than a large number. There will be many cores on a single GPU that can work at the same time, that is to say, itsParallel computing power is very strongYes. Graphics processor (GPU), as its name suggests, is specially used to process graphics at the beginning, so when it comes to graphicsUsing GPU(using) orGPU support(backed), people will associate with concepts related to fast graphics rendering or smooth user experience. In recent years, withGPU acceleration conceptWith the popularity of GPU, more and more calculations are performed on GPU alone.
Peeping into modern browser architecture (I)
< p align = “center” > each GPU core has only one wrench in its hand, which shows that its ability is very limited, but there are many people</ p>

When you open an application on your mobile phone or computer, the CPU and GPU support the operation of the application. Generally speaking, your application needs to passoperating systemSome mechanisms provided can run on CPU and GPU.
Peeping into modern browser architecture (I)
< p align = “center” > the three-tier architecture of a computer. The bottom layer is a hardware machine, the operating system is sandwiched in the middle, and the top layer is a running application</p>

Executing programs on processes and threads

Before going deep into the browser architecture, we also need to understand the related concepts of process and thread. A process can be viewed as an executing program. andThreads run in the process, a process may have one or more threads that can execute any part of the application code.
Peeping into modern browser architecture (I)
< p align = “center” > the process is like a big fish tank, and the thread is the fish swimming in the bathtub</p>

When you start an application, the operating system will create a process for the program and allocate a slice for the processPrivate memory space, this space will be used to store all program related data and status. When you close the program, the process corresponding to the program will disappear, and the memory space corresponding to the process will be released by the operating system.
Peeping into modern browser architecture (I)
< p align = “center” > the process uses the memory space allocated by the system to store application data</p>

Sometimes, in order to meet the needs of functions, the created process will ask the system to create other processes to handle other tasks, but the new process will haveNew independent memory spaceInstead of sharing memory space with the original process. If these processes need to communicate, they need to go throughIPCMechanism (inter process communication). Many applications take this approachMulti process approachBecause processes and processes are independent of each other, they do not affect each other. In other words, if one worker process hangs, other processes will not be affected, and the hung process can be restarted.
Peeping into modern browser architecture (I)
< p align = “center” > different processes communicate through IPC</p>

Browser architecture

So how do browsers work with processes and threads? In fact, it can be divided into two architectures. One is the single process architecture, that is, only one process is started, in which multiple threads work. The second is the multi process architecture. The browser will start multiple processes. There are multiple threads in each process. Different processes communicate through IPC.
Peeping into modern browser architecture (I)
< p align = “center” > architecture diagram of single process and multi process browsers</p>

The above chart architecture actually includes the specific implementation of the browser architecture. In reality, there is no browser implementation standard that everyone follows, so the implementation methods of different browsers may be completely different.

In order to better discuss in this series of articles, we mainly discuss the latest Chrome browser architecture, which usesMulti process architecture, the following is the architecture diagram:
Peeping into modern browser architecture (I)
< p align = “center” > the multi process architecture diagram of chrome. The card of multiple rendering processes is used to indicate that chrome will create a rendering process for each tab</ p>

Chrome browser will have a browser process, which will cooperate with other processes to realize the functions of the browser. For the renderer process, chrome will allocate a separate process for each tab and even each iframe in the page as much as possible.

How do the processes work together?

The following are the specific responsibilities of each process:

process Responsible work
Browser Responsible for the “Chrome” part of the browser, including navigation bar, bookmarks, forward and back buttons. At the same time, this process will also control the parts we can’t see, including the sending of network requests and the reading and writing of files.
Renderer Responsible for all work related to web page display in tab.
Plugin Controls all plug-ins used by web pages, such as flash plug-ins.
GPU Responsible for GPU tasks independent of other processes. It is a separate process because it has to process rendering requests from different tabs and draw it on the same interface.

Peeping into modern browser architecture (I)
< p align = “center” > different processes are responsible for the interface contents of different parts of the browser</p>

In addition to the processes listed above, chrome has many other processes working, such as extension process and utility process. If you want to see how many processes are running in your Chrome browser, you can click more buttons in the upper right corner of the browser and select more tools and task managers:
Peeping into modern browser architecture (I)
In the pop-up window, you will see the list of working processes and the CPU and memory used by each process.

Benefits of chrome multi process architecture

So why does chrome work with a multi process architecture?

One of the advantages is that multi process can make the browser have good fault tolerance. For most simple scenarios, chrome assigns a render process to each tab. For example, if you have three tabs, you will have three independent rendering processes. When one of the tabs crashes, you can close this tab at any time and the other tabs will not be affected. However, if all tabs are running in the same process, they will have a joint relationship, one hanging all hanging.
Peeping into modern browser architecture (I)
< p align = “center” > different tabs have different rendering processes</p>

Another advantage of Chrome’s multi process architecture is that it can provide security and sandboxing. Because the operating system can provide methods for you to limit the capabilities of each process, the browser can make some processes do not have certain specific functions. For example, because tab rendering processes may process random input from users, chrome limits their ability to read and write system files at random.

However, the multi process architecture also has its disadvantage, that is, the memory consumption of the process. Since each process has its own independent memory space, they cannot share memory space like threads in the same process, which leads to the problem that some basic architectures (such as V8 JavaScript engine) will exist in the memory space of different processes at the same time, and these repeated contents will consume more memory. Therefore, in order to save memory, chrome will limit the number of started processes. When the number of processes reaches a certain limit, chrome willAll tabs that visit the same website are run in one process

Save more memory – service of chrome

The same optimization method can also be used on the browser process. The architecture of Chrome browser is undergoing some changes. The purpose is to split the parts related to the browser itself (chrome) into different services. After service, these functions can be run in different processes or combined into a separate process.

The main reason for this is to make chrome perform differently on different performance hardware. When chrome runs on some hardware with better performance, browser process related services will be run in different processes to improve the stability of the system. On the contrary, if the hardware performance is poor, these services will be executed in the same process to reduce the occupation of memory. In fact, before this architecture change, chrome has begun to take a similar approach on Android.
Peeping into modern browser architecture (I)
< p align = “center” > the difference between Chrome running browser related services in the same process and in different processes</p>

Single frame rendering process – site isolation

Site isolation is a function recently launched by Chrome browser. This function will assign an independent rendering process to iframes of different sites in the website. As mentioned earlier, chrome will allocate a separate rendering process for each tab, but if there is only one process for a tab, iframes from different sites will run in this process, which also means that they will share memory, which may destroy the homology strategy. Homology policy is the core security model of browser. It can prohibit websites from obtaining data from another site without consent. Therefore, bypassing homology policy is the main purpose of many security attacks. And processes isolation is the best and most effective way to isolate websites. Coupled with the hidden dangers of meltdown and Spectre in the CPU, website isolation becomes inevitable. Therefore, after the chrome 67 version, the desktop version of chrome will turn on the website isolation function by default, so that each cross site iframe will have an independent rendering process.
Peeping into modern browser architecture (I)
< p align = “center” > the website isolation function will enable cross site iframes to have independent processes</p>

Website isolation technology has gathered the R & D efforts of our engineers for several years. In fact, it is far from as simple as imagined. It just allocates an independent rendering process for iframes of different sites, because it fundamentally changes the communication mode between iframes. After website isolation, for websites with iframe, when users open devtool on the right, Chrome browser actually needs to do a lot of behind the scenes work to make developers feel no difference from the previous ones, which is actually difficult to achieve. For some very simple functions, such as searching for a keyword on the page with Ctrl + F in devtool, chrome has to traverse multiple rendering processes. So our browser engineers all lamented that this was a milestone achievement after the release of the function of website isolation.

summary

In this article, we discuss the high-level architecture design of browser and the benefits of multi process architecture. At the same time, we also discussed the technologies of service and website isolation, which are closely related to the browser multi process architecture. In the next article, we will begin to understand in depth how these processes and threads render our website pages.

Keep an eye on my technical developments

I’m a green onion attacking. Pay attention to me and progress with me into an independent full stack engineer!

The article starts from: peeping into the architecture of modern browsers (1)

Focus on my official account and get my latest technology push!
Peeping into modern browser architecture (I)