Original text: developers.google.com/web/updates…
The core of the browser is the CPU and GPU
CPU
A CPU can be considered the brain of a computer. A CPU core, think of it like an office worker, can handle one job after another. In the past, most cpus were single-chip. Modern hardware often has multiple cores that provide powerful computing power for phones and computers.
GPU
Graphics Processing Unit – A Graphics Processing Unit. Cpus are good at simultaneously handling the first simple task across the kernel. As the name suggests, it was developed for processing graphics.
A computer has a three-tier architecture: the machine hardware is at the bottom, the operating system is in the middle, and the applications are at the top.
Executes programs on processes and threads
A process can be thought of as the execution of an application. Threads exist in a process and can execute any part of the process.
When we start an application, we create a process. Optionally, a program may create multiple threads to help it work. The operating system allocates a block of memory to the process, and all the state of the application can be stored in this private space. When the program is closed, the process disappears and the operating system frees memory.
A process can request another process from the operating system to perform different tasks, and the operating system will allocate another portion of memory to the new process. If two processes want to communicate, they need to use Inter Process Communication. Many applications work this way, and if a process is unresponsive, you can restart it without stopping the process that executes the rest of the application.
Browser architecture
There is no standard specification for how to build a Web browser, so the implementation of one browser may be completely different from another. It can be a single process with multiple threads, or several processes that communicate via IPC.
Let’s take Chrome’s architecture as an example. At the top is the browser process, which coordinates the other processes of the application. For the renderer process, there will be multiple and assigned to each TAB. Chrome now provides a separate process for each TAB page creation, including iframe.
The following figure shows the multi-process architecture of Chrome. There are multiple layers under the render process, which means that multiple render processes are running for each TAB page.
What does each process control?
| Browser Process | Address bar, bookmarks, forward and back buttons. It also handles special parts that are not visible, such as network requests and file access. |
|---|---|
| Renderer Process | Control all content displayed inside the TAB. |
| Plugin Process | Control all plug-ins for your site, such as Flash |
| GPU Process | Processes GPU tasks that are isolated from other processes. |
Different processes point to different parts of the browser UI:
There are more processes, such as extension processes and utility processes. We click on the three dots in the upper right corner of the browser and choose “More Tools” -> “Task Manager”, which lists the currently running processes and CPU/memory usage. As follows:
Advantages of Chrome’s multi-process architecture
- Each TAB page has its own process. If the page does not respond, other tabs are not affected.
- For safety and sandbox isolation. Because the operating system provides a way to limit process permissions, browsers can precisely sandbox certain functions. Chrome, for example, severely restricts any user input to any process that accesses any file.
Since processes have their own private memory space, they usually contain backups of common structures. This means more memory footprint because they are not multiple threads of the same process and therefore cannot be shared. To save memory, Chrome limits the number of processes that can be started. The limit is dynamically determined based on the current device memory and CPU, but when triggered, multiple TAB pages on the same site will be run in one process.
Save memory – Chrome servitization
The same applies to browser processes. Chrome is working on an architecture overhaul that will allow each application part of the browser to run as a service, allowing different processes to be split and merged.
The general idea is that when Chrome is running on powerful hardware, it will split each service into a different process for stability, but on a resource-limited device, Chrome will consolidate the service into a single process to save memory. Prior to this change, the Android platform had used a similar approach to merge multiple processes in order to reduce memory usage.
Separate renderer – site isolation
Site isolation is a newly introduced feature in Chrome that allows you to run a separate rendering process for each iframe. We’ve been talking about having a separate renderer for each TAB page, which allows iframes across sites to run in one renderer and share memory space across different sites. Running a.com and b.com in one rendering process seems to be no problem. The same origin policy is the core security model of the Web. It ensures that a web site can access data from other sites without the same access. Bypassing this policy is the main target of security attacks. Process isolation is the most effective way to isolate a site. Because of the two classic vulnerabilities meltdown and Spectre, it becomes more obvious that we need to isolate sites using processes. With site isolation enabled by default since Chrome version 67, there is a separate rendering process for each iframe across sites.
conclusion
In this article, we’ve covered the advanced view of the browser and the advantages of a multi-process architecture. We cover servitization and site isolation, which are closely related to multi-process architecture. In the next article, we’ll delve into these processes and threads in order to show what happens on the site.