There are four main browser processes:

  • The main process of the browser

  • Network process

  • GPU rendering process

  • Rendering process

Enter the URL to the page to begin the parsing process

  • When the browser’s main process receives user input in the address bar, it first determines whether to search for content or a URL.

  • In the case of a search, the main browser process uses the default search engine to synthesize the URL with the search content and hand it to the web process.

  • If it is a URL, it will be handed to the network process (IPC) according to the rules, plus the protocol.

  • Change the icon of the browser’s main process TAB to the load state, execute the beforeUnload event.

  • After receiving the message, the network process performs the following operations:

  • Cache lookups (Service Worker, Memory cache, disk cache)

  • DNS Domain name Resolution

  • The request protocol is HTTPS, TLS connection (application layer)

  • Ready for TCP connection (Transport layer)

  • Plus IP header (network layer)

  • MAC Data Frames (Data Link Layer)

  • The network process constructs the request header, request body and other information, and adds the Cookie related to the domain name to the request header (after establishing the connection) and sends it to the switch.

  • Switch to router.

  • Router to server.

  • Once the network process receives the response header, it parses it and sends the response header data to the browser main process.

  • After the browser main process receives it, it sends a ‘submit Navigation’ message to the renderer process.

  • After receiving the ‘submit navigation’ message, the renderer process is ready to receive the response data and render the page. It directly establishes a data channel with the web process and sends a ‘submit document’ message to the browser main process, which then receives the data and parses the rendered page.

  • The browser main process updates the page state, history, security status, and unloads previous documents.

Note: When you enter the URL and press Enter, it means that the old document is about to be unmounted. You can use the window.beforeunload event to do some pre-exit or prevent the page from updating (via e.returnValue).

Parsing the rendering process

When the renderer sends a ‘commit confirmation’ message to the browser’s main process, it begins parsing the resource as it downloads. Parsing a resource starts with receiving the Content-Type field, and once the browser determines that the resource is HTML, it creates or selects a renderer process for the request.

The process for parsing rendered pages is as follows:

  • Build a DOM tree
  • Build CSSOM tree
  • The layout phase
  • Layer the layout tree and generate the layer tree
  • Generate a drawing list for each layer and hand it to the composition thread
  • The composite thread divides the layer into blocks and transforms the blocks into bitmaps in the rasterized thread pool
  • The composite thread sends the DrawQuad command to the main browser process, which generates the page and displays it on the screen