1. Process mechanism of Chrome

1.1 Why Do I Choose Chrome?

  1. Because Chrome, Microsoft Edge and most of the mainstream browsers in China, are based on Chromium secondary development
  2. Chrome is the official release of Google and has basically the same features as Chromium, with only some product-level differences
  3. Chrome is currently the most used browser in the world, so Chrome is the most representative

1.2 How many processes does Chrome need to start a page?

  1. Network process – Network request related
  2. Browser process – Main browser process (coordination, master)
  3. GPU process – 3D drawing
  4. Renderers – page rendering, script execution, event handling (one per TAB page) plus plugin processes if the open page has a plugin running

2. Single-process browser era

Single-process browser – All the functional modules of the browser run in the same process, including the network, plug-ins, JavaScript runtime environment, rendering engine, pages, etc

Defects and problems:

  • Unstable – Plugin instability can cause the entire browser to crash; Complex javascript code causing the rendering engine to crash;
  • Not smooth – each module is running in the same process, meaning only one module can be executed at a time;
  • Unsafe – plugins can be written in C/C++ code. Plugins can access any resources of the operating system. When you run a plugin on a page, it means that the plugin can fully operate your computer. If it’s a malicious plug-in, it can release a virus, steal your passwords, and raise security issues

Typical scenario: When you’re in the middle of opening multiple web pages in your browser, when one crashes or becomes unresponsive, the entire browser crashes or becomes unresponsive, and then your email page to your boss disappears, is your heart as broken as your web page?

3. Multi-process browsers — early days

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).

Defects and problem solving:

  • Resolve instability issues – page and plug-in processes are independent of each other
  • Solve the problem of poor flow — only the current page rendering blocks;
  • – Chrome locks the plugin and renderer processes in a sandbox, so that even if a malicious program is executed in the renderer or plugin process, the malicious program cannot break through the sandbox to obtain system permissions.

Question: What happens when you type a URL from the browser to render a page?

1. Browser rendering process — DOM tree building

Why are DOM trees built? This is because HTML cannot be understood and used directly by browsers, so you need to transform the HTML into a structure that browsers can understand — a DOM tree. The input for building a DOM tree is a very simple HTML file, which is parsed by an HTML parser and finally outputs the DOM as a tree structure.

2. Browser rendering process — style calculation

Purpose: Calculate the specific style of each element in a DOM node

  1. Translate CSS into knots that browsers can understand
  2. Transform property values in the stylesheet to standardize them
  3. Figure out the specific style of each node in the DOM tree

3. Browser rendering process — layout stage

Layout: The style of the DOM tree and elements in the DOM tree is not enough to display the page. We also need to know the geometry of the DOM elements. We call this process layout.

4. Browser rendering process — layering

Layering: Complex effects on the page such as complex 3D transformations, page scrolling, etc. To make these effects easier, the rendering engine also needs to generate a layer tree for a particular node.

5. Browser rendering process – Generate layer drawing list

Draw a list:

  1. The rendering engine will break down the drawing of a layer into smaller drawing instructions, which are then sequentially assembled into a list of layers to draw
  2. The instructions in the draw list tell it to perform a simple draw operation, such as drawing a pink rectangle or a black line

6. Browser rendering process — Rasterization

Rasterization: Prepare the drawing list of layers → submit the drawing list to the composition thread → Divide the layer into tiles (rasterization) → Rasterization using the GPU (cross-process operation involved)

7. Browser rendering process — composition and rendering

Composition and display: rasterization of all pictures → synthesis thread generates DrawQuad command → VIZ component receives command and draws content in memory → screen display

Question: When you first enter the product page, why do you have a blank screen for 1-2 seconds?

Optimization direction:

  1. Number of static resource requests – merge scripts, stylesheets
  2. Request bandwidth – Remove duplicate scripts (tree shaking); Code Spliting
  3. Cache utilization – Add Expires header and configure Etag
  4. Page structure – Put style sheets at the top and scripts at the bottom
  5. Code level – executing script function procedures, page blocking; Closures cause memory leaks and so on