As mentioned in another article, ecma262 only defines some specifications at the language level, and the actual operation of js requires a specific host environment to provide input and output functions.

This series introduces three common JS hosting environments

  • Web Browser (this article)
  • node.js
  • electron

This article uses Chrome as an example to provide a brief overview of the browser’s architecture and how it works. For more details, see links to this web performance article.

See Inside Look at Modern Web Browser for the full text.

Chrome Architecture

Relevant concepts

Before getting into the specifics of Chrome’s architecture, let’s review a few concepts

The first two pieces of hardware are important

  • The central processing unit (CPU) is the computing core control center of a computer
  • A GPU is a Graphics Processing Unit, which can be understood as a CPU with many cores for Processing simple computation. At first, it is used to process images, and later, it can be used to process computing tasks independently.

There are two other important concepts involved in actually running a program

  • A process introduces the concept of concurrency in an operating system, which can be understood as a running program in an application, as shown here
  • Threads can be thought of as lightweight threads, see here

Multi-process architecture

A browser includes a variety of tasks. It can use only one process to contain multiple threads or multiple processes, and different browsers will have different implementations (for example, Chrome browser allocates a rendering process to each TAB and another rendering process to its cross-domain IFrame, namely Site Isolation). On the whole, more processes are more advantageous, including

  • Each TAB is in a different process to avoid the impact of a TAB that does not respond to other tabs
  • Enhanced security

The architecture described in this article (which refers to the design at the time of publication, in September 2018) includes

  1. The Browser process, the browser’s main process, is responsible for the navigation bar, bookmarks, forward and back buttons, and controls visibility and privileged functions such as Web requests and file access.
    • UI thread page presentation and interaction
    • Network Thread network request
    • Storage thread storage
  2. The Renderer process controls what is displayed within a TAB, and the JS engine and Browser Engine work in this process. Js Engine, is the implementation of ES262, used to run JS; The Browser Engine, also known as layout Engine or Rendering Engine, is responsible for other tasks outside the JS engine, such as parsing HTML and CSS, and layout
    • Worker thread
    • The main thread handles code outside of the worker
    • Compositor thread
    • The next two raster threads participate in rendering
  3. The plugin process
  4. The GPU process is responsible for gpu related work of other processes

Navigation process

This part mainly occurs in the Browser process and involves some interaction with the Renderer process.

Process the input

When entering content in the input box, first determine whether to query or visit the URL.

Start navigation

When you hit Enter, the UI thread starts a network thread to initiate a request, the loading spinner starts, and if a redirection is returned, another request is reinitiated

Process the response

When the response is received, it determines the type based on the Content-Type, etc. If it’s HTML, it sends it to the Renderer process, otherwise it sends it to the downloader. Safety checks are also carried out at this stage, including CORS

The Renderer process used here looks up or starts at the same time as the previous request is made, and repeats if redirected to a cross-domain site

Submit the navigation

When both the data and the Renderer process are ready, the Browser process sends an IPC Renderer process to submit the navigation. Once the Renderer process validates and navigation is complete, the document loading phase begins.

At this point the address bar and session history are updated,

End of the rendering

When the onload event for all frames of the current interface is completed, the Renderer process is sent to the Browser process and the loading spinner stops

6. Navigating to another site is mostly the same as before, you need to trigger the beforeUnload event before starting

Document loading and rendering process

This part of the task is to turn the various resources in the HTML page into an interactive page.

Parsing

The Renderer process receives the navigation submission and begins to receive the HTML data and parse the DOM.

Style calculation

Parse the CSS and add a computed Style for each element attribute.

Layout

Calculate the coordinates of each element to generate a layout tree containing pseudo-elements and so on.

Paint

Create Paint Records by iterating through the Layout tree, recording the drawing order, such as z-Index effects.

Compositing

The main thread iterates through the Layout tree to generate the Layer Tree, determines which layer each element is in, and then commits the Layer Tree and Paint Records to the Compositor thread. The latter divides each layer into smaller pieces and sends them to the Raster thread for rasterization and storage in GPU memory.

When the required pieces are rasterized, the Compositor thread is used to generate the Compositor frame, which is then submitted to the Browser process via IPC and sent to the GPU for display on the screen. If a scroll event occurs, the Compositor thread creates another Compositor frame to send to the GPU to render a new page if the current page is not bound with event listeners (see the next section).

User event input

Receive event input

When a user interaction event occurs, the Browser process sends the coordinates and event type of the event to the Renderer process

Handle events

The Compositor thread determines the event target based on the information and sends the event to the main thread if the Region has an event binding (called a non-fast Scrollable Region), otherwise only the necessary composition is required.

Smooth scrolling

The conpositor thread will need to communicate with the main thread each time a new frame is composite (because the default event may be cancelled), causing a freeze. {passive: True} can compose new frames directly without affecting event listening (default behavior cannot be undone in this case).

You can also unbind events directly

#area {
  touch-action: pan-x;
}
Copy the code