Introduction to the

Web browsers are particularly widely used software, and there are currently five major browsers in use: Internet Explorer, Firefox, Safari, Chrome and Opera. Let’s take a look at how Chrome works.

CPU and GPU

As the two most important computing units in a computer, CPU and GPU directly determine the computing performance.

  1. CPU: The central processing unit (CPU) that parses computer instructions and is responsible for a variety of different tasks. It can process the tasks given to it one after another in serial order. The number of cores in a CPU refers to the number of physical, that is, hardware cores. For example, dual-core consists of two separate CPU core unit groups, and quad-core consists of four separate CPU core unit groups

  2. GPU: A graphics processor. A single GPU core can only handle some simple tasks. However, it is superior to the large number of cores

  3. Process & Thread

Process – Think of it as an application being executed.

Threads – run in processes. A process may have one or more threads that can execute any part of the application’s code

When the application is started, the process is created, the program can create a thread to help their work, and when you start an application, the operating system will create a process for this program and the process for a private distribution Some memory space, this space will be used to store all the related data and status.

When you close the program, the corresponding process will disappear and the corresponding memory space will be freed by the operating system.

Many applications work in a multi-process manner because processes are independent of each other and do not affect each other. In other words, if one of the worker processes dies, the other processes are not affected, and the dead process can be restarted

Browser Architecture

With processes and threads, browsers can be designed as single-process, multi-threaded architectures, or multi-process, multi-threaded architectures using IPC.

We introduced the Chrome multi-process architecture, where there are different types of processes in Chrome, each doing its own job.

Browser(one) – Browser process, there is only one Browser process, which is responsible for the main part of the Browser, including navigation bar, bookmarks, forward and back buttons, providing storage, etc

Network(one) – A Network process that is responsible for loading Network resources for a page. It used to run as a module in the browser process until recently it became a separate process

GPU(one) – An image rendering process that is responsible for GPU tasks independent of other processes. It’s a separate process because it handles render requests from different tabs and draws it on the same interface.

Renderer(multiple) – the rendering process that is responsible for all the work related to the presentation of a web page within a TAB, such as combining HTML, CSS and

JavaScript is converted to a web page that the user can interact with, and by default each TAB has a separate rendering process.

Plugin(multiple) – Plug-in process

Extensions(multiple) – The Extensions process

Other processes – tooling processes, auxiliary frameworks, etc

Chrome’s more tool-Task Manager allows you to view the current browser’s running processes, as well as memory and CPU consumption

Benefits of a multi-process architecture

When we visit a site, the rendering process is responsible for running the site’s code, rendering the site’s pages, and responding to user interactions. When we open three tabs in Chrome and visit three sites at the same time, if one of them doesn’t respond, we can close it and use the other tabs. This is because Chrome creates a separate rendering process for each site that handles the rendering of the current site. If all pages are running in the same process, when one page does not respond, all pages are stuck.

1. The fault tolerance

Chrome assigns each TAB a separate render process that belongs to it. For example, if you have three tabs, you will have three separate rendering processes.

When one of the tabs crashes, you can close that TAB at any time and the other tabs are not affected. However, if all tabs run in the same process, they will be related to each other.

2. Safety and sandbox

Because operating systems can provide ways for you to limit what each process can do, browsers can exclude certain processes from certain functions. For example, because TAB rendering processes may handle random input from users, Chrome limits their ability to read and write system files randomly.

3. More memory per process

Since each process is allocated a separate memory space, it stands to reason that each process has more memory.

Disadvantages of multi-process architecture

As mentioned above, each process has its own memory space, and they cannot share the same memory space as threads in the same process.

Something as basic as the V8 Javascript engine exists simultaneously in the memory space of different processes, so it consumes unnecessary memory.

Memory optimization for multi-process architecture

  • How does Chrome optimize for this situation?

Limit the number of processes that can be started. When the number of processes reaches a certain threshold, Chrome will run all tabs that visit the same website in one process.

  • Chrome service, save more memory

The architecture of Chrome is changing to break the browser itself (Chrome) into different services, which can be run in different processes or combined into a single process.

The architecture of Chrome is changing to break the browser itself (Chrome) into different services, which can be run in different processes or combined into a single process.

What happens when you navigate

  1. Process the input

When we type in the address bar, the UI thread first determines whether what we type is something to search for or a site to visit, because the address bar is also a search box.

  1. Start navigation

When we press Enter to start access, the UI thread accesses the site resources with the help of the network thread.

The TAB icon displays a rotating circle indicating that the resource is being loaded, and the network process performs a series of operations such as DNS addressing and establishing a TLS connection for the request

  1. Read the response
  • Response type judgment
  • Processing of different response types
  • The security check
  1. Find a process to draw the page

After the network process has done all its checks and is able to tell the browser to navigate to the requested site, it tells the UI thread that all the data is ready.

  1. Submit the navigation

At this point, the data and rendering processes are ready and the browser process tells the browser rendering process via IPC to commit the navigation

  1. loaded

Once the navigation is committed, the rendering process starts loading resources and rendering the page. Once the rendering process loads, it tells the browser process via IPC, and the UI thread stops spinning around the navigation bar.

Visit different sites

That was the end of an ordinary visit. When we enter another address, the browser process repeats the above process. However, before starting a new access, it is determined whether the current site cares about the beforeUnload event. Beforeunload event alerts the user whether to access a new site or close a TAB. If the user refuses, the new access or shutdown is blocked. Since all the work involving rendering and running Javascript occurs in the rendering process, the browser process needs to check with the rendering process whether the current site cares about unload before new access begins.