The browser is one of the software that accompanies us for the longest time every day, especially the front-end development engineer. For this friend who accompanies us every day, it is necessary for us to have a deep understanding of it. However, the working principle of the browser involves a lot of content, this article will start from its development history and multi-process architecture, from a macro perspective to understand the browser.

Browser History

1991: Berners-Lee builds the first web browser, WorldWideWeb, which displays text and pictures.

In 1993:MosaicIt was the first browser to achieve universal use and display text and images.

In 1994:Netscape browserReleased with static HTML, no JS and CSS, and Opera in the same year.

We may not have used any of the above browsers due to their age, but the following browsers may be more familiar to you:

1995: Microsoft launchesIE1.0, IE2.0“, the familiar browser that comes with Windows computers. 1996: Microsoft integrates Internet Explorer 3.0 with Windows. Integrated browsers were created to compete with Netscape, which had 86 percent of the market, and Microsoft’s Internet Explorer, which was integrated with Windows, had 99 percent of the browser market by 1999.

2003: Apple launchesSafariBrowser, which is also integrated into Apple’s computer systems, opened its webKit kernel in 2005.

In 2004:Firefox1.0release

2008: Google took WebKit as the kernel, created a new project Chromium, on the basis of the project released its own browser product Chrome, Chrome so far, occupied more than 60% of the browser market share.

The most used PC browser in the world is Chrome, according to GooglestatcounterChrome’s share of the global browser market is 68.58 percent, more than seven times that of Safari in second place. Internet Explorer’s share has fallen to 1.37 percent, ranking sixth. Chrome, Microsoft Edge and most of the browsers in China are based on Google’s Chromium project, so the multi-process architecture that will be discussed next will take Chrome as an example.

In 2013, chrome ranked first in the world market share in the fifth year after its release. The multi-process architecture mentioned in the second part of this article is the first application of Chrome. Let’s take a look at the advantages of multi-process architecture.

PC Browser market share changes from January 2009 to July 2021 (data sourcestatcounter)

Multi-process browser architecture

Before understanding the browser multi-process architecture, it’s important to understand the concepts of processes and threads and some of their characteristics.

Processes and threads

  • A process is the execution of an application. That is, when we open an application, the operating system creates the corresponding process. When we open the browser, the operating system will create the browser process, open wechat will create the wechat process, other applications are the same.

  • Processes have three characteristics:
    • Processes enable the operating system to start other processes to perform different tasks.
    • Process isolation: The operating system allocates different memory blocks to different processes to prevent data from being written to another process. If processes need to communicate with each other, they need to communicate through the Inter Process Communication (IPC).
    • After the process ends, the browser reclaims the corresponding memory resources. After the application is shut down, the process of the application stops running, and the operating system reclaims the memory resources occupied by the process for allocation to other processes.
  • Threads: Threads are internal structures used by processes to perform tasks. A process can start multiple threads to perform tasks.

  • Threads also have some characteristics:
    • Threads share data within a process
    • The failure of one thread in the same process causes the entire process to crash

Single-process browser

All the functional modules of the single-process browser run in the same process, as shown below:

Prior to 2007, browsers were single-process. Because the web content displayed by earlier browsers was relatively simple, such as images and text, and few interactive functions, the single-process architecture saved more memory. However, as technology has improved, web pages have not only to display text images, but also to display a variety of complex animation effects, and JavaScript interaction has become more and more common. All function modules run in a single process, which makes the browser unstable, sloppy, and insecure.

  • Unstable: Plugins and rendering engines are prone to errors, which can crash the entire browser process if the page thread fails.
  • Not smooth: The JavaScript runtime and the page render both run in the same thread. If there is complex JS code or an infinite loop, the JavaScript runtime will always monopolize the page thread, all pages will not have a chance to perform tasks, and the browser will become stagnant and unresponsive.
  • Unsafe: Threads also share permissions in addition to data in the process, which means that if the browser process has read and write permissions to the operating system, some malicious plug-in can write a virus to the computer and read the account password on the computer.

Early multi-process architecture

In Chrome’s early multi-process architecture, pages and plug-ins ran in separate processes. The stacked rectangles in the figure above represent multiple processes. Multiple plug-ins can run in multiple plug-in processes, and the browser will start a process for each browser TAB when memory resources are sufficient. The main browser process controls the browser’s user interface, including the address bar, forward and back buttons, and bookmarks. It also handles web requests, file access, and communication between management processes. Multi-process architecture can solve the problems of instability, influency and insecurity of single-process browsers.

  • Resolve instability issues: Because processes are isolated, crashes of a page or plug-in do not affect other pages or cause the entire browser to crash.
  • Solve the problem of poor flow: JavaScript runs in a separate renderer process, and even if the renderer crashes, other pages and the browser main process are not affected. Only the current page will stall when running an infinite loop.
  • Resolve security issues: The renderer and plug-in processes run inside the sandbox, keeping the system secure by limiting the process’s permissions.

Later multi-process architectures

After the multi-process architecture was proposed, Google continued to optimize it, later separating the web module from the main browser process and adding a GPU process to draw Chrome’s UI. While the multi-process architecture improves the stability, smoothness, and security of the browser, it also introduces the problem of excessive memory resources, because the process contains repeated functional modules, such as every renderer process contains the JS runtime environment. As shown in the following figure, every browser TAB rendering process must contain the JS runtime environment, which consumes a lot of memory resources when many pages are opened.

Service-oriented architecture

In order to solve the problem that browsers occupy too much system resources and further optimize the multi-process Architecture, in 2016, the Chrome official team designed a new Chrome Architecture using the idea of “Service Oriented Architecture” (SOA).

The new architecture reconstructs the original functional modules into independent services, each of which can be run in a separate process and must be accessed using defined interfaces. Chrome is currently in a transition from an old architecture to a service-oriented one. The new architecture is flexible and resilient, with basic services running in separate processes on devices with sufficient memory resources. When memory resources are low, multiple underlying services are merged into the browser main process for execution, as shown in the figure below.

conclusion

To sum up this article in one sentence: In the Yangtze River, waves behind push on those before, and a new generation replaces the old. This means that things develop, the new things promote the old things, the new things will replace the old things. The same is true of browsers. In the 30 years since 1991, the dominant browsers on the market have changed, from the early popular netscape to Internet Explorer, to FireFox and Safari, and finally to Chrome. Browser technology has also evolved from static pages that could display only text and images to dynamic pages that can display a variety of media. From the previous single-process architecture to the current stable, smooth and secure multi-process architecture. After Chrome adopted multi-process architecture, Internet Explorer and FireFox implemented their own multi-process architecture.

reference

Time.geekbang.org/column/arti… www.bilibili.com/read/cv7962… Chrome Service Model Multi-process Architecture Inside look at modern web browser (part 1) Process Models