01 | Chrome architecture: just opened a page, why there are four process?

Processes and threads

process

When a program is enabled, the operating system allocates a block of memory for the program to store its code, data, and a main thread environment. You can think of it as the working environment, the factory

thread

Can only exist in process, cannot live alone. It can be understood as a factory assembly line

1. Multi-process: Multiple pipelines are used to assign tasks. 2. Single process: A single pipeline blocks tasks.Copy the code

Process and thread relationships

1. If any thread fails to run, the process crashes. (Any assembly line fails, and the finished product cannot be assembled) 2. Data of the process is shared between threads (each assembly line can use the resources of the factory) 3. After a process is shut down, the operating system reclaims memory, even if it is leaked due to improper thread operations. (As the factory closed, the sample with logo leaked from the assembly line could not be used any more) Processes are isolated from each other and can communicate with each other using IPC (factories do not pass their trade secrets to each other unless there is business cooperation).Copy the code

Single-process browser

  1. One thread hangs, and the entire browser crashes
  2. inPage threadIf JS runs an infinite loop of code, the thread blocks and the entire browser becomes unresponsive
  3. Unsafe, because multithreading can share process data, and some third-party plug-ins can get code data
  4. If the page is opened more than once, only a few pages are closed later. The data is still stored in the memory, resulting in a larger and larger memory

Multiprocess browser

1 Browser Process, multiple Render processes, multiple Plugin processes, 1 GPU Process, 1 Network Process

  1. Open one more page, add one more render process
  2. Processes do not affect each other
  3. Complex architecture and large memory space allocation.

Answer: Opening a Chrome page will enable the main process, the rendering process, the web process, the GPU process and, if a plugin is installed, the plugin process

04 | navigation process: from the input URL to the page display, what happened in this time?

Explained from the coordination between browser processes

  1. The user enters the URL inBrowser main processTo determine whether it is a keyword or address, splicing into a final URL to go to
  2. Browser main processCommunicate via IPC, say URL passNetwork processThe network process starts working:
    • Request a local cache resource, return the resource directly if there is one, if not, the network request process
    • The DNS
        1. Check whether the IP address corresponding to the domain name is configured in the local host file
        1. DNS cache
        1. The specific DNS resolution rule (unknown for now) is obtained
    • Establishing a TCP Connection
    • Sending an HTTP request
        1. On the first request, the server returns the resource directly with code: 200
        1. The browser caches the resource based on the caching rules returned by the server
        1. The request again
          1. Cache (cache-control) first, if hit, do not request the server, directly obtain the resource from the Cache, code: 200
          1. No strong cache is hit then check the negotiated cache (ETag/ if-none-match, last-mo______ / if-mo______ -since) If it is hit then the server returns the cache resource with code: 304
          1. The server returns the resource with code: 200
        1. Redirect. If the code returned is 301 or 302, the network process will re-initiate the same request to the URL of the Location field
    • After obtaining the resource, transfer the resource to IPCRendering process, see the next chapter for the specific process!

05 | rendering process: HTML, CSS, and JavaScript, is how to become a page?

According to the chronological order of rendering, it can be divided into the following sub-stages: build DOM tree -> style calculation -> Layout stage -> layer -> Draw -> block -> Raster -> composition

Each phase focuses on three things:

  1. The input
  2. process
  3. The output

Build a DOM tree

  1. Enter: HTML file
  2. Procedure: Parsed by an HTML parser
  3. Output: DOM tree structure

Style calculation

  1. Input: CSS file, retrieved from style, link, inline
  2. Process:
      1. Convert to a browser-aware styleSheets format, available through Document. styleSheets.
      1. Convert attribute values, blue -> RGB (0,0,255), bold -> 700… (Can be used as a knowledge point of CSS optimization)
      1. Property inheritance and the default User Agent
  3. Output: Each DOM style is available inComputedStyleIn the view

The layout phase

  1. Enter: DOM tree
  2. Process:
      1. Iterate through all visible DOM nodes, ignoring head, display: None, etc
      1. Calculates the position of each DOM

Geek Time: How Browsers Work and Practice