I wrote this column because I recently wanted to reorganize my front-end knowledge systematically. I will try to write some business related tips and front-end knowledge of the key content, core ideas.

preface

The browser is every front-end developer’s weapon, and knowing the browser not only helps us better understand the front-end work, but also gives us more perspective on how to optimize the technology. Note that the browser mentioned in this article is chrome by default.

Processes and threads

A process is a running instance of a program. When we start a program, the operating system creates a block of memory for the program to hold code, running data, and a main thread to perform tasks. Such a runtime environment is called a process.

Thread is the task execution environment started and managed by the process, so their relationship should be one process for multiple threads.

The role of multithreading

The reason there are threads is because our processes need to divide tasks into multiple simultaneous tasks, which we call parallel processing.

Here’s an example:

var a = 1+1;
var b = 2+2;
var c = 3+3;
var d = a+b+c;
Copy the code

The above code, if executed by a single thread, would work out a, B, and C linearly. And you add them up and you get d. Parallel execution allows us to compute a, B, and C simultaneously with three threads. And you end up with D. What started out as four steps can be reduced to two.

The relationship between processes and threads

Note the following rules between processes and threads:

  1. The failure of any thread in the process will cause the entire process to crash.
  2. Threads share data in a process.
  3. When a process is shut down, the operating system reclaims the memory occupied by the process.
  4. The contents of the processes are isolated from each other.

Browsers and Processes

Since a process is the running environment of an application, does that mean that when we start a browser, we only start a “browser process”? Not exactly, because early browsers were really single-process.

In the early days (prior to 2007), browsers on the market were single-process, with all functional modules running in a single process. This leads to a lot of browser problems, blocking before different tasks, plug-ins affecting our pages on a massive scale, etc. This is why the browser crashed.

Fortunately, today’s browsers have a multi-process architecture. This leads to a number of optimizations:

  1. Because multiple processes are isolated from each other, when one of them crashes, it does not affect the others (the most common scenario is when the page is hung by A plugin or page A crashes and affects page B). This prevents the whole browsing crash caused by one feature.
  2. When a process shuts down, it reclaims its memory as soon as possible, so that it doesn’t have the memory leak tragedy that occurred when the browser was left open and used more and more memory.
  3. Browser as a program itself can interact with the operating system, so in the era of single process, some malicious plug-ins can access our computer through loopholes, which is a great security problem. With a multi-process architecture, every process in the browser runs in a security sandbox, and plug-ins can no longer access our computer.

So how many processes does the browser have?

Now that the browser is multi-process architecture, how many processes does it have? The answer is that it depends on usage. But let’s take the simplest example, a clean browser (without any plug-ins installed) opens a page. There will be four processes:

Browser process The main process of the browser is responsible for interface display, user interaction, child process management, and storage.
Rendering process The core process for page rendering, which transforms HTML, CSS, and JavaScript into a web page that users can interact with, runs in the Blink and JavaScript engine V8. Renderers are run in sandbox mode to ensure safety.
GPU process Chrome had no GPU process when it was first released. At the beginning, GPU was only used to achieve 3D CSS effect, but later, webpage and Chrome UI interface were all drawn on GPU, which made GPU become a common requirement for browsers. Hence the introduction of the GPU process.
Network process Responsible for loading web resources for a page, which used to run as a module in the browser process until recently, when it became a separate process.

If a plug-in is used, there is a plug-in process:

Plug-in process It is mainly responsible for the running of plug-ins. Plug-ins are prone to crash. Therefore, plug-ins need to be isolated through the plug-in process to ensure that the plug-in process crash does not affect the browser and page.

It should also be noted that every time we open a new page TAB, a new rendering process is created. This enables process isolation between different pages. So if we open 2 pages with a browser and run a plugin, we’re actually running 6 processes — browser, GPU, web, plugin and 2 renderers.

“Same site” situation

As mentioned above, every time the browser opens a new page, it creates a new rendering process. But there is actually a special case. The same site.

“Same site” means the same protocol and root domain name, as in the following example:

https://video.xxx.com https://picture.xxx.com https://picture.xxx.com:8000 / / all three url above belong to the same site.Copy the code

If we open A new page and the browser decides that the new page B is the same site as one of the original pages A, it doesn’t create A new renderer, but reuses page A’s renderer.

The Browser of the future

While the multi-process browser architecture brings many benefits, it also brings some problems:

  • Higher resource usage. Multiple processes inevitably contain copies of the common infrastructure, where memory resources are virtually unnecessary.
  • More complex architectures. Problems such as high coupling between browser modules and poor scalability lead to the current architecture has been difficult to adapt to new requirements.

In order to solve these problems, in 2016, the Chrome official team designed a new Chrome Architecture using the idea of “Services Oriented Architecture” (SOA). This is a whole architecture is reconstructed scheme, interested friends can consult to understand. To be sure, each new generation of browser architecture has had an “industrial revolution” impact on the Web industry.

conclusion

Today we learned about the relationship between processes and threads, and the process architecture of modern browsers. Hope to help you to have a further understanding of the browser.