Start with the CPU and GPU — the CPU and GPU are the heart of a computer

  • The CPU is the brain of the computer, and the core of the CPU operates byIn turn,To handle the tasks assigned to it; CPU single core ability can deal with a wide range of things; Cpus used to have one core, but now they have more than one
  • GPU has weak single-core ability and is good at handling simple work, but it is better in quantity. Where previously the main task was processing images, gpus now take on more computing power
  • Whether you open an application on your phone or computer, it runs on a CPU and GPU

Execute programs on Processes and Threads

⚠️ uses process and thread to avoid errors; This paragraph is very helpful for beginners to learn, but it is recommended to understand the original text directly, so directly listed ⚠️
  • A process can be described as an application’s executing program.A process is a running instance of an application. Some apps support multiple applications, such as VScode. This means that the app can have multiple processes running at the same time, and multiple open processes are not supported, such as wechat on PC or MAC, so only one process is running at the same time.
  • A thread is the one that lives inside of process and executes any part of its process’s program.Thread and process relationship
  • When you start an application, a process is created.When the process is created
  • The Operating System gives the process a "slab" of memory to work with and all application state is kept in that private memory space. When you close the application, the process also goes away and the Operating System frees up the memory.When an app is started, the operating system creates a process for the app, and then gives the process a private memory area to store app data. When the app is shut down, the process ends and memory is reclaimed
  • A process can ask the Operating System to spin up another process to run different tasks. When this happens, different parts of the memory are allocated for the new process. If two processes need to talk, they can do so by using Inter Process Communication (IPC). Many applications are designed to work this way so that if a worker process get unresponsive, it can be restarted without stopping other processes which are running different parts of the application.Process can also apply to the system for another process to communicate with each other through IPC. Many programs do this because one process is unresponsive and can be restarted without stopping the other processes

Browser architecture

  • The browser has a single process architecture is also a multi-process architecture, here to Chrome as an example to explain, Chrome is a multi-process architecture browser
  • Chrome “on top” is the browser process as the coordinator for the entire browser; Until recently, Chrome generally provided a rendering process for each TAB whenever possible. Now Chrome is trying to provide a rendering process for each site including iframes
  • Diagram of Chrome’s Multi-Process Architecture. This diagram Outlines IPC associations between various processes and among them

Scope of control for major processes

  • Browser process:
    1. Visible parts: address bar, bookmarks, forward and back keys
    2. Invisible parts: Network request, file acquisition
  • Render process: The display area of a web page on a browser
  • Plug-in process: Management plug-in
  • GPU Process: It is divided into different processes because it needs to process requests from different apps
  • You can view other processes in Settings ➡️ more tools ➡️ Task Manager

Advantages of multi-process browsers

  1. In the TAB example, the failure of a single TAB does not affect other tabs
  2. Single processes are locked in a sandbox to improve security, such as the ability of the browser to restrict free access to files by processes that process user input, such as renderers
  3. ❗️ But things are not always pretty, because Chrome has multiple processes, and processes are isolated and have independent memory, so different processes cannot share some common infrastructure. For example, the V8 engine (Chrome’s javascript engine) needs to run on all processes, resulting in memory consumption. The solution chrome engineers came up with was to first limit the number of processes That Chrome could start, depending on the host’s hardware. When the limit was reached, Chrome would place web pages from the same site into a process ❗️

A solution to save more memory — Servicification

  • This section is also some information about the future of Chrome – Services Oriented Architecture (SOA)
  • To achieve the purpose of SOA, in short, similar to the third advantage is that when running chrome in powerful host, will service individual ChengJinCheng so as to improve the stability, the opposite will be able to in the process of service can be combined into a single process, such as shown in the original animation, poor chrome will network, the condition of hardware equipment, Store and other processes into the browser process.

Frame by frame rendering process – site isolation

  • Site isolation refers to a separate rendering process for iframes across sites.
  • As an important security model, the same origin policy can not be ignored, but it will cause security risks if one TAB per render process is adopted.
  • Starting with Chrome 67, there is a separate rendering process for each cross-site iframe;
  • Assigning a separate renderer to a cross-site IFrame may seem simple to implement, but it is actually very difficult, such as finding a page. If the current page has a cross-site IFrame, that is, there are multiple renderers on the current page, which means that the page lookup operation needs to be searched across processes, which is predictably difficult

This section refs:

  • English original 🔗

The next section,

Inside Look at Modern Web Browser (2) — Classic problem: The entire process from entering a URL to displaying a web page