[TOC]

No nonsense. This section uses Chrome as an example.

Browser process


Viewing administrative tasks: \color{#33CC99}{view admin task:} Top right -> More Tools -> Task Manager As shown, Chrome has multiple processes (currently two tabs open)

GPU process 3. Network Service process 4. Audio Service process 5. Alternate renderer process 7. Renderer process 1 8. Renderer process 2Copy the code
  • Main browser process: responsible for interface display, user interaction, sub-process management, and storage
  • Render process: HTML, CSS, JS into a web page
  • GPU process: UI drawing
  • Network Service process: Load resources

In this case, if you open another TAB, a rendering process will be added (with some exceptions, as discussed below). This does not mean that the browser has only one of these processes.

1. Any thread in the process fails and the process crashes. 2. Processes are isolated from each other but can communicateCopy the code
As mentioned above, when you open the TAB page, a new render process will be added. However, there is an exception. When A opens page B from page A, but A and B belong to the same site, B will reuse the rendering process of A, that is, A and B share the rendering process. In this case, one page crashes, and the other page also crashesCopy the code
As mentioned above, A and B share processes. There are exceptions o(╥﹏╥)o Enter the address directly in the address bar of the browser to open the page. Even if the page is from the same site, processes are not sharedCopy the code

What happens when you enter the URL

  1. The browser process checks the URL, assembles the protocol, and makes up the complete URL
  2. Browser processes send urls to network processes through interprocess communication
  3. The network process checks to see if the URL is locally cached and returns it to the browser process if it is
  4. If not, the network process makes an HTTP request to the Web server
  • 4.1\color{#FF7F50}{4.1}
  • 4.2 Setting up TCP connections using IP addresses and ports
  • 4.3\color{#FF7F50}{4.3}4.3 Build the request header and send it
  • 4.4 Color {#FF7F50}{4.4}4.4 After the server responds, the network process accepts the response header and response data and parses its contents
  1. Network Process Response
  • 5.1\color{#FF7F50}{5.1}5.1 check the status code, if it is 301, 302, then read the address from the location, re-request
  • 5.2\color{#FF7F50}{5.2}5.2 200 Processing: Check the Content-Type, if the byte stream Type, submit to the download manager, no further rendering; If it is HTML, notify the browser process to prepare for rendering
  1. Prepare the render process
  2. Transfer data, update status
  • 7.1 color{#FF7F50}{7.1}7.1 When the renderer process is ready, the browser process sends a message to the renderer process. After receiving the message, the renderer process establishes a pipeline to transmit data to the network process
  • 7.2 color{#FF7F50}{7.2}7.2 After receiving the data, the renderer process replies with a message to the browser process
  • 7.3\color{#FF7F50}{7.3}7.3 The Browser process updates the Browser interface status after receiving the message
  1. The renderer process renders the page

Browser rendering process

  1. Build a DOM tree
  2. Style calculation
  3. Layout stage (position calculation)
  4. layered
  5. Generate a layer drawing list
  6. Rasterization operation
  7. Composition and display
So if you go to the console and you type in Document, you can see the whole DOM tree and you type in Document.stylesheets, you can see the style structureCopy the code
Will references to CSS files in HTML block DOM tree construction? Don't. Because the HTML is turned into a DOM tree, the discovery file request is handed over to the network process to request the file, and the renderer continues parsing the HTMLCopy the code
Will references to CSS files in HTML block the rendering of the page? Will be. Because page rendering requires CSS stylesCopy the code
Will references to CSS files in HTML block the rendering of the page? Will be. Because page rendering requires CSS stylesCopy the code