A glimpse of modern browser architecture (1)

Time:2020-5-22

preface

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

CPU, GPU, memory and multiprocess architecture

Here4 series of tutorialsIn it, I will start with the high-level architecture of Chrome browser, and go all the way to the specific details of the rendering pipeline. If you want to know how the browser transforms your code into a usable website, or you don’t know why some specific code writing methods can improve the performance of the website, then you come to the right place. This article is for you.

As the first article in this series, we’ll look at some of the keyComputer terminologyAnd ChromeMultiprocess architecture

The core of computer – CPU and GPU

To understand the browser’s operating environment, we need to understand some computer components and their functions.

CPU

The first thing we want to talk about is the brain of the computer – CPU(Central Processing Unit)。 CPU is a chip in a computer with one or more cores. We can compare a core of CPU to an office workerPowerfulIt knows astronomy, geography, music, chess, calligraphy and painting,It can process the tasks it is given one by one serially。 A long time 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.
A glimpse of modern browser architecture (1)
< p align = “center” > the four CPU cores happily handle the tasks assigned to them one by one in 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 of them. There will be a lot of cores on a single GPU that can work at the same time, that is to say, itsParallel computing power is very strongOf. GPU, as the name suggests, is used to process graphics at the beginning, so when it comes to graphicsUsing GPU(using) orGPU support(backed), people will think of the concept of fast rendering or smooth user experience. In recent years, withGPU acceleration conceptWith the popularity of GPU, there are more and more computing on GPU.
A glimpse of modern browser architecture (1)
< p align = “center” > there is only one wrench in each GPU core, which means its ability is very limited, but there are many of them! </p>

When you open an application on your phone or computer, the CPU and GPU are actually behind it. In general, your app has to go throughoperating systemSome of the mechanisms provided can run on the CPU and GPU.
A glimpse of modern browser architecture (1)
< p align = “center” > the three-tier architecture of the computer, the lowest layer is the hardware machine, the operating system is sandwiched in the middle, and the top layer is the running application</p>

Executing programs on processes and threads

Before we dive into the browser architecture, we need to understand the concepts of process and thread. A process can be seen as an executing program. andThread is running in the processThere may be one or more threads in a process that can execute any part of the application code.
A glimpse of modern browser architecture (1)
The < p align = “center” > 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 assign a piece ofPrivate memory spaceThis 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 also be released by the operating system.
A glimpse of modern browser architecture (1)
The process uses the memory space allocated by the system to store the application data</p>

Sometimes in order to meet the functional requirements, 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 toIPCMechanism (inter process communication). Many applications take this approachMulti process approachTo work, because processes and processes are independent of each other, they do not affect each other. In other words, if one of the worker processes hangs up other processes will not be affected, and the hung up processes can be restarted.
A glimpse of modern browser architecture (1)
< 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 single process architecture, that is, only one process is started, and there are multiple threads working in this process. The second is multi process architecture. The browser will start multiple processes, each process has multiple threads, and different processes communicate through IPC.
A glimpse of modern browser architecture (1)
< p align = “center” > Architecture of single process and multi process browsers</p>

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

For a better discussion in this series, we will focus on the latest Chrome browser architecture, which adoptsMultiprocess architecture, the following is the architecture diagram:
A glimpse of modern browser architecture (1)
< p align = “center” > Chrome’s multi process architecture diagram. 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 work with other processes to implement browser functions. For the render process, chrome will try to assign a separate process to every tab or even every iframe in the page.

How to divide and cooperate in each process?

The following are the specific responsibilities of each process:

process Responsible work
Browser Responsible for the chrome section of the browser, including navigation bar, bookmarks, forward and back buttons. At the same time, this process also controls the invisible parts, including the sending of network requests and the reading and writing of files.
Renderer Be 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 independent because it processes rendering requests from different tabs and draws them on the same interface.

A glimpse of modern browser architecture (1)
< 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 the more buttons in the upper right corner of the browser to select more tools and task managers:
A glimpse of modern browser architecture (1)
In the pop-up window, you will see the list of working processes, as well as the CPU and memory used by each process.

The benefits of Chrome’s multiprocessing architecture

So why does chrome work with a multi process architecture?

One of the advantages of multiprocessing is that it can make browsers have good fault tolerance. For most simple scenarios, chrome assigns a render process to each tab. For example, if you have three tabs, you have three separate rendering processes. When one of the tabs crashes, you can close the tab at any time and the other tabs are not affected. However, if all the tabs are running in the same process, they will have a joint relationship, one hang all hang.
A glimpse of modern browser architecture (1)
< p align = “center” > different tabs will have different rendering processes to take charge of</p>

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

However, multiprocess architecture has its disadvantages, that is, the memory consumption of processes. Because each process has its own independent memory space, they can’t share the memory space like the threads in the same process, which causes some basic architectures (such as the V8 JavaScript engine) to exist at the same time in the memory space of different processes, and these repeated contents will consume more memory. So in order to save memory, chrome will limit the number of started processes. When the number of processes reaches a certain limit, chrome willAll the tabs visiting the same website run in the same process

Save more memory – chrome services

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 chrome into different services. After being serviced, these functions can be run in different processes or combined into a single process.

The main reason for this is to make chrome perform differently on different performance hardware. When chrome runs on some good hardware, browser process related services will be placed in different processes to improve the stability of the system. On the contrary, if the hardware performance is not good, these services will be executed in the same process to reduce the memory consumption. In fact, before this architecture change, chrome had already begun to take a similar approach on Android.
A glimpse of modern browser architecture (1)
< p align = “center” > the difference between putting browser related services in the same process and putting them in different processes</p>

Single frame rendering process site isolation

Site isolation is a recently launched feature of Chrome browser, which will assign an independent rendering process to iframes of different sites within the site. As mentioned before, chrome will assign a separate rendering process to each tab, but iframes from different sites will run in this process if there is only one process for a tab, which means they will share memory, which may damage the same origin policy. Homology policy is the core security model of browser. It can prevent the website from obtaining the data of another website without permission. Therefore, bypassing homology policy is the main purpose of many security attacks. And process isolation is the best and most effective way to isolate websites. In addition, the CPU has the hidden dangers of meltdown and spectrum, so website isolation becomes necessary. Therefore, after chrome 67, the desktop version of chrome will turn on site isolation by default, so that each cross site iframe will have a separate rendering process.
A glimpse of modern browser architecture (1)
< p align = “center” > website isolation function will enable cross site iframe to have independent process</p>

Website isolation technology has gathered our engineers’ research and development efforts for several years. In fact, it is far from as simple as it is to assign an independent rendering process to iframes of different sites, because it fundamentally changes the communication mode between iframes. After website isolation, for websites with iframe, when users open the devtool on the right, Chrome browser actually needs to do a lot of behind the scenes work to make developers feel that this is different from the previous one, which is actually difficult to achieve. For some very simple functions, such as using Ctrl + F in devtool to search for a keyword on the page, chrome needs to traverse multiple rendering processes to complete. So our browser engineers all lament that this is a milestone achievement after the release of the website isolation function.

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 browser multi process architecture. In the next article, we’ll start to learn more about how these processes and threads render our web pages.

Keep an eye on my technology

I’m the green onion of attack, pay attention to my progress and become an independent Engineer in the whole stack!

The first place of this article: a glimpse of modern browser architecture (1)

Focus on my official account and get my latest technology push!
A glimpse of modern browser architecture (1)