Intensive reading "In-depth understanding of modern browsers 1"

Inside look at modern web browser is a series of articles that introduces the principle of browser implementation, a total of 4 articles, this intensive reading introduces the first one.

Although this article was written in 2018, it is still worth learning now, because the browser implementation is very complicated, it is easy to get lost in learning from the details, and lack a sense of overallity. This article starts from the macro level, almost no code implementation is involved. It is a thinking description, very suitable for cultivating the overall framework thinking of the browser.

The original text has a lot of vivid illustrations and moving pictures, which is convenient for deepening the understanding of knowledge, so it is also recommended to read the original text directly.

Overview

The article starts with the introduction of CPU, GPU, and operating system, because these are the bases on which the browser runs.

The relationship between CPU, GPU, operating system, and application

The CPU is the central processing unit, which can handle almost all calculations. The CPU used to be single-core, but now most laptops are multi-core, and professional servers even have more than 100 cores. The CPU has strong computing power, but it can only handle one thing.

GPU was originally designed for image processing, that is, it mainly processes pixels, so it has a large number of parallel processing capabilities for simple things. It is very suitable for matrix operations, and matrix operations are the basis of computer graphics, so they are widely used in Visualization field.

CPU and GPU are computer hardware, each of which provides some interfaces for assembly language calls; and the operating system uses C language (such as linux) to manage the hardware based on them, including process scheduling, memory allocation, and user Kernel mode switching, etc.; it is the application program that runs on the operating system, so the application program does not directly deal with the hardware, but indirectly operates the hardware through the operating system.

Why can't the application directly manipulate the hardware? This has huge security risks, because the hardware does not have any abstraction and security measures, which means that in theory a webpage can directly access any of your memory addresses when you open the webpage through the js program, and read your chat history , And even read the historical input bank card password for transfer operations.

Obviously, the browser runs on the operating system as an application.

Process and thread

In order to make the program run more safely, the operating system has created the concept of process and thread (Linux implements the same set of process and thread). The process can allocate independent memory space, and multiple threads can be created in the process to work. These threads Shared memory space.

Because the memory space is shared between threads, communication is possible without communication, but there are also communication requirements between processes with isolated memory addresses, which need to be communicated through IPC (Inter Process Communication).

The processes are independent of each other, that is, a process hangs up and will not affect other processes, and a new process can be created in a process and communicate with it. Therefore, the browser adopts this strategy to integrate the UI, network, and rendering , Plug-ins, storage and other modules have independent processes, and can be re-awakened after any hang.

Browser architecture

The browser can be split into many independent modules, such as:

• Browser module (Browser): Responsible for the coordination of behaviors in the entire browser, calling various modules.
• Network module (Network): Responsible for network I/O.
• Storage module (Storage): responsible for local I/O.
• User interface module (UI): responsible for the interface module provided by the browser to the user.
• GPU module: responsible for drawing.
• Renderer: Responsible for rendering web pages.
• Device module (Device): Responsible for interacting with various local devices.
• Plug-in module (Plugin): Responsible for processing various browser plug-ins.

Based on these modules, the browser has two available architecture designs, one is less process, the other is more process.

Fewer processes means that these modules are placed in one or a limited number of processes, that is, one thread per module. The advantage of this is that the memory space is shared to the greatest extent, and the equipment requirements are low, but the problem is that there is only one thread Hanging up will cause the entire browser to hang up, so the stability is poor.

Multi-process refers to the creation of a process for each module (as far as possible). The modules communicate through IPC, so any module will not affect other modules, but the disadvantage is that it takes up a lot of memory, such as the browser js parsing and execution engine V8 It is necessary to copy multiple instances to run in each process under this architecture.

Advantages of Chrome's multi-process architecture

Chrome tries to create a separate process for each tab, so we can close it calmly when a tab does not respond, and other tabs will not be affected. Not only between tabs, but also between iframes within a tab will create independent processes. This is done to protect the security of the website.

Servicing-single/multi-process flexible architecture

Chrome is not satisfied with adopting one architecture, but switching between different architectures in different environments. After Chrome modularizes each function, it can freely decide which modules are currently placed in a process and which modules to start an independent process, that is, it can decide which set of process architecture to adopt at runtime.

The advantage of this is that single-process mode can be turned on on resource-constrained machines to save memory overhead as much as possible. This is actually done in mobile applications; and independent processes are used on machines with abundant resources and sufficient cores. Mode, although it consumes more resources, it has gained better stability.

Iframe exclusive process

site-isolation wraps different iframes in the same tab to run in different processes to ensure the exclusivity and security of resources between iframes. This feature was not updated until 2018.7 because there are many complicated tasks to be handled behind, such as the debugging of developer tools and the global search function of web pages, which cannot be affected by the isolation of processes. Chrome must let each process respond to these separately. Operation, and finally aggregated together, so that users do not feel the barriers between processes.

intensive reading

This article starts with how the browser builds its own applications based on the concept of processes and threads provided by the operating system. Starting from the layering of hardware, operating systems, and software, this article introduces how the browser divides modules and assigns processes or threads to these Module operation, the thinking behind this is very valuable.

From a macro perspective, to design a secure, stable, high-performance, and expandable browser, the functional modules must first be clearly divided, and the communication relationship between each module must be defined, and a set of module collaborations should be developed in each business scenario. Process.

Browser master-slave architecture

Similar to the master-slave mode of the application, the Browser module of the browser can be regarded as the master module, which itself is used to coordinate the operation of other modules and maintain the normal work of other modules, waiting or re-awakening when other modules lose response, or Reclaim the memory when the module is destroyed.

Each slave module also has a clear division of labor. For example, when the browser clicks on the URL address, it will first respond to the user's input through the UI module and determine whether the input is a URL address, because the input may be other illegal parameters, or some query or setting commands . If the input is indeed the URL address, after the verification is passed, the Network module will be notified to send the request, and the UI module will no longer care about how the request is processed. The Network module is also relatively independent and only processes the sending and receiving of requests. If the received HTML web page is received, it will be handed over to the Renderer module for rendering.

With these relatively independent and well-defined module divisions, using these modules as threads or process management will not affect their business logic. The only impact is whether the memory is shared, and whether a module will be affected after a crash There are other modules, so based on this architecture, it is much easier to determine the device type to adopt a single-process or multi-process mode, and the process elastic architecture itself does not need to invade the business logic of each module. It is an independent mechanism in itself. .

The browser is a very complex application. If you want to maintain it continuously, you must make a reasonable design for each function point, so that the modules are highly cohesive and low-coupling, so as not to let any modification affect the whole body. .

Tab and iframe process isolation

The sandbox isolation scheme of the micro front end is also relatively hot. Here you can compare it with the browser tab/iframe isolation.

Most of the sandbox solutions based on the js runtime are born because the iframe is slow. Generally with , and the global object references accessed are modified. However, based on the characteristics of the js prototype chain, in order to block the traceability to the prototype chain To the main application code, proxy generally used to block access to the variables of the with

There are also some solutions that use the creation of an empty iframe to obtain the document variable and pass it to the sandbox to achieve access isolation to a certain extent, and the listener added to the document will be destroyed with the destruction of the iframe, which is convenient for control.

There are some more thorough attempts, throwing the js code to the web worker to run, and using mocks to simulate the dom API that is missing when the worker is running.

Comparing these schemes, it can be found that only the last worker scheme is the most thorough, because the worker process created by the browser is completely resource-isolated. If you want to communicate with the main thread of the browser, you can only use postMessage , although there are some memory sharing based on ArrayBuffer Solution, but because the supported data types are pertinent, there will be no security issues.

Going back to the browser developer's perspective, why does iframe isolation take a huge amount of effort to split multiple processes, and finally it takes a lot of effort to stitch them back together to restore a relatively seamless experience? Browser vendors can actually use the js runtime capabilities mentioned above to transform the API syntax and create a logical sandbox environment.

I think the essential reason is that the sandbox to be implemented by the browser must be at the process level, that is, absolute isolation of memory access permissions, because the logical level of isolation may vary with the implementation of browser vendors, or the logic loopholes in the API itself This leads to the emergence of ultra vires, so if you need to construct a completely secure sandbox, it is best to use the API provided by the browser to create a new process to handle the sandbox code.

Summarize

This article introduces how the browser is designed based on the macro-architecture of the operating system. It mainly talks about one thing, that is, the flexible use of the process and threading model. At the same time, security requirements must be considered in the design of tabs and iframes, and processes are used when necessary. Because there is no security problem between the browser's own modules, the process model can be flexibly switched.

The discussion address is: Intensive Reading "Understanding Modern Browser One" · Issue #374 · dt-fe/weekly

If you want to participate in the discussion, please click here , there are new topics every week, weekend or Monday release. Front-end intensive reading-to help you filter reliable content.

Follow front-end intensive reading WeChat public

<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">

Copyright notice: Freely reproduced-non-commercial-non-derivative-keep the signature ( Creative Commons 3.0 License )