What can Web applications do, and what new areas can they fit into in the future?

  • The first is webization of the application. With the popularization of cloud computing and the rapid development of HTML5 technology, more and more applications are turning to browser/server (B/S) architecture. This change makes the importance of browsers grow day by day, and several core scenes of video, audio and games are also switching to Web usage scenes.
  • The second is mobile Web applications. The Web is inherently open for mobile applications, and while there are still technical issues that need to be addressed (e.g., rendering processes are too complex to perform as well as native apps, users can’t use them offline, they can’t receive push notifications, and there are no primary portals on mobile), But Google has come up with the PWA solution to combine the advantages of both the Web and native applications. By the way, PWA is also a plan I am looking forward to.
  • The third is the systematization of Web operations. In my opinion, Web operating system has two meanings: one is to use Web technology to build a pure operating system, such as ChromeOS; The second is the evolution of the underlying architecture of the browser towards the operating system architecture, which will involve many changes in the context of the overall architecture evolution. Here are some changes that I think are relatively important.

Chrome is evolving towards SOA, and many modules will be made available as services to upper-layer applications. Introducing support for multiple programming languages in browsers, such as the new WebAssembly support; Simplify the rendering process, making the rendering process more direct and efficient; Increase the support for system equipment characteristics; Provides support for complex Web project development.

Processes and threads

What is parallel processing?

An example of multiple tasks at the same time is as follows:

A = 1+2
B = 20/5
C = 7*8
Copy the code

When writing code, we can break this process down into four tasks:

  • Task 1 is to calculate A=1+2;
  • Task 2 is to calculate B=20/5;
  • Task 3 is to calculate C=7*8;
  • Task 4 is to display the result of the final calculation.

Normally a program can be processed using a single thread, that is, each of the four tasks is executed in four steps in sequence.

What happens if you use multiple threads? The first step is to use three threads to execute the first three tasks simultaneously. Second, perform the fourth display task.

By comparison, you can see that it takes four steps to execute with a single thread, compared to two steps with multiple threads. Therefore, using parallel processing can greatly improve performance.

Threads vs. processes

Multithreading can process tasks in parallel, but threads cannot exist alone. They are started and managed by processes.

A process is an instance of a program. When a program is started, the operating system creates a block of memory for the program, which is used to store code, running data and a main thread to perform tasks. We call such a running environment a process.

As can be seen from the figure, threads are attached to processes, and multi-threaded parallel processing in processes can improve computing efficiency. In summary, the relationship between processes and threads has the following four characteristics.

    1. The failure of any thread in the process will cause the entire process to crash.
    1. Threads share data in a process.

    1. When a process is shut down, the operating system reclaims the memory occupied by the process.

When a process exits, the operating system reclaims all the resources applied for by the process. Even if any of these threads leak memory due to improper operation, the memory will be properly reclaimed when the process exits.

For example, the previous Internet Explorer browser supported a lot of plugins, and these plugins were prone to memory leaks, which meant that as long as the browser was open, memory usage could increase, but when the browser process was closed, all of this memory would be reclaimed by the system.

    1. The contents of the processes are isolated from each other.

Process isolation is A technique to protect each process from interfering with each other in the operating system. Each process can access only the data it owns, preventing process A from writing data to process B. Because data between processes is strictly isolated, a crash or hang of one process does not affect other processes. If there is a need for data communication between processes, then a mechanism for interprocess communication (IPC) is needed.

Browser transitions

Single-process browser era

Now that we know about processes and threads, let’s take a look at the architecture of the single-process browser. As the name suggests, a single-process browser means that all the functional modules of the browser run in the same process, including the network, plug-ins, JavaScript runtime environment, rendering engine and pages. Until 2007, all browsers were single-process. The architecture of the single-process browser is shown below:With so many functional modules running in a single process, the result is a single-process browserUnstable, fluid and insecureIs a major factor in.

Early multi-process architecture

You can start by looking at the process architecture of Chrome when it was released in 2008.As you can see, Chrome pages run in a separate rendering process, and plugins run in a separate plug-in process, which communicates with each other through an IPC mechanism (dotted line).

Let’s see how we can solve the instability problem. Processes are isolated from each other, so when a page or plug-in crashes, it only affects the current page or plug-in process, not the browser and other pages, which perfectly solves the problem that a page or plug-in crash can cause the entire browser to crash, which is unstable.

Let’s take a look at how the problem is solved. Also, JavaScript runs in the renderer process, so even if JavaScript blocks the renderer process, it only affects the current rendering page, not the browser and other pages, whose scripts are running in their own renderer process. So when we run the script in Chrome, the only thing that doesn’t respond is the current page. The solution to the memory leak is even easier, because when a page is closed, the entire rendering process is closed, and the memory occupied by the process is then reclaimed by the system, which can easily solve the memory leak problem of the browser page.

Finally, let’s look at how the above two security problems are solved. An added benefit of the multi-process architecture is the use of a secure sandbox, which you can think of as a lock placed on the process by the operating system. Programs in the sandbox can run, but they cannot write any data to your hard drive or read any data from sensitive locations, such as your documents and desktop. Chrome locks the plugin and renderer processes in a sandbox, so that even if a malicious program is executed in the renderer or renderer process, the malicious program cannot break through the sandbox to obtain system permissions.

Current multi-process architecture

As can be seen from the figure, the latest Chrome Browser includes: one main Browser process, one GPU process, one NetWork process, multiple rendering processes and multiple plug-in processes.

Let’s take a look at each of these processes one by one.

  • Browser process. It is mainly responsible for interface display, user interaction, sub-process management, and storage.
  • Render process. The core task is to turn HTML, CSS, and JavaScript into web pages that users can interact with. Both the typography engine Blink and JavaScript engine V8 run in this process. By default, Chrome creates a rendering process for each Tab Tab. For security reasons, renderers are run in sandbox mode.
  • Process of GPU. In fact, Chrome didn’t have a GPU process when it was first released. The original intention of using GPU was to achieve 3D CSS effect, but later the UI interface of web page and Chrome were drawn on GPU, which made GPU become a common requirement of browser. Finally, Chrome has introduced GPU processes on top of its multi-process architecture.
  • Network process. It is responsible for loading web resources on the page. It used to run as a module in the browser process until recently, when it became a separate 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.

Why 4 processes with only 1 page open?

Because opening a page requires at least one network process, one browser process, one GPU process and one rendering process, a total of four. If the page you open has a plug-in running, you need to add one more plug-in process.

However, every coin has two sides. While the multi-process model improves the stability, smoothness, and security of the browser, it also inevitably introduces some problems:

  • Higher resource usage. Because each process contains a copy of the common infrastructure (such as the JavaScript runtime environment), this means that the browser consumes more memory resources.
  • 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.

The future of service-oriented architecture

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). In other words, the overall Chrome architecture will move toward the “service-oriented architecture” of modern operating systems, where the various modules will be reorganized into separate services, each of which can run in a separate process. Access to services must use defined interfaces and communicate via IPC to build a more cohesive, loosely-coupled system that is easy to maintain and expand, better meeting Chrome’s goals of simplicity, stability, speed, and security.

Chrome eventually reconstructs UI, database, files, devices, and network modules into basic services, similar to operating system underlying services. Here is a diagram of Chrome’s “Service-oriented Architecture” process model:Chrome is currently in the process of transitioning from the old architecture to a service-oriented one, which will be a long and iterative process.

Chrome is gradually building Chrome Foundation Service, which can be considered the “base” system services layer of the OPERATING system if you think of Chrome as a “portable OPERATING system.”

Chrome also offers a flexible architecture that allows basic services to run in multi-process mode on powerful devices, but on resource-constrained devices (see figure below), Chrome can consolidate many services into a single process to save memory footprint.

The resources

Working principle and practice of browser