First, pre-knowledge

1. Modern browser processes

Modern browser processes include: browser process, web process, renderer process, GPU process and plug-in process. In order to understand what happens from URL to page rendering, you have to understand and remember the first three processes.

  • The browser process is responsible for interface display, user interaction, child process management, storage, and so on.
  • The network process is responsible for loading the network resources of the page.
  • The rendering process is responsible for turning HTML, CSS, and JS into a web page that users can interact with. The typography engine and V8 engine also run in it. By default, each Tab enjoys one render process. The renderer process runs under the sandbox. The render process includes the render main thread, THE IO thread, the composite thread, and the rasterized thread (pool).
  • The GPU process is responsible for implementing 3D CSS effects and drawing UI interfaces.
  • The plug-in process is responsible for running the plug-in, running the plug-in in a separate process to ensure that the plug-in process crash does not affect the browser and the page.

2. Event loops

Events are classified as internal message type events and page events.

Internal message events include input events (mouse scroll, click, move), microtasks, file reads and writes, Websockets, JavaScript timed tasks, and so on. Page events include JavaScript execution, DOM parsing, style calculation, layout calculation, and CSS animation.

All of the above events are handled in the renderer process.

Event loops occur in the rendering process. The render process maintains two threads: the render main thread and the IO thread. The renderer also maintains a message queue (fifO). The render main thread and the IO thread communicate via message queues.

  • The browser process and network process communicate the events to the renderer process through IPC, and the IO thread of the renderer process encapsulates the events into tasks in order and puts them in the message queue. Tasks in the message queue are handed to the main thread of the renderer process in a first-in, first-out order. The renderer process sometimes relies on other processes such as GPU processes for processing.

What happens from entering the URL to rendering the page?

1. Navigation process

  • First, the browser process receives user input. After pressing Enter, it triggers the beforeUnload event, and performs some cleanup operations before the current page exits. If the current page is not listening for beforeUnload Event or beforeUnload event agrees to continue the subsequent process, determines whether the user input is a URL. If so, legalize the URL and then hand it to the network process. If not, synthesize a URL according to the search engine and hand it to the network process.

  • The browser process sends the URL request to the network process according to the interprocess communication IPC. First the network process looks for the local cache and returns the requested resource directly to the browser process. If not, the network process makes a real request based on the URL

    • The first step in a network request is DNS resolution to request the server IP address of the domain name. If the request protocol is HTTPS, then a TLS connection is established
    • The second step is to establish a TCP connection with the server based on the IP address. After the connection is established, the browser constructs the request line, requests first-class information, appends data such as cookies related to the domain name to the request, and sends the constructed request to the server. And wait for the server to return the message
    • The third step is to perform different operations based on the content of the server response. First, look at the status code of the response. If it is 301, it indicates a temporary redirect, and a new network request will be reconstructed based on the location field in the response header and sent
    • If the content-type value is application/ OCtet-stream, it will be processed according to the download Type and submitted to the browser download manager. In the case of text/ HTML, the web process hands the HTML data to the browser process

  • If the newly opened page is the same site as the current page, the new page will reuse the parent page’s renderer process, if not the same site, the browser will create a new renderer process

  • To receive HTML browser process data, to the rendering process initiated “submit document” on the message to the rendering process, the rendering process after submitting the document message is received, and establish a channel for data transmission and data transmission network process, waiting for the data transmission, rendering process will return to “confirm submission” messages to the browser process. When the browser updates the browser status after receiving “Confirm submission”, the browser displays a blank screen.

2. Rendering process

  • First, the main thread of the renderer process parses the DOM tree from the HTML content. The DOM tree is almost identical to the HTML, except that you can query or modify the DOM tree through JavaScript. The DOM tree has no style.
  • Then there is the calculation style, which comes from the external CSS file referenced by link, the CSS inside the style tag, and the CSS embedded in the HTML tag. The browser then calculates styleSheets based on that. Stylesheets attribute values are then normalized, such as 2em >30px, red > RGB (255,0,0),bold >700. Finally, calculate the specific style of each node in the DOM tree, involving inheritance, cascading, and so on, and store the specific style of each node in the ComputerStyle structure.
  • Then is the layout stage, first to traverse all the nodes in the layout tree to add to the layout tree, that is, to create the layout tree. Then the geometry of each node is calculated according to the contents of the layout tree, and saved in the layout tree.
  • Then there is the layering stage, where the rendering engine also needs to generate layers for specific nodes to perform complex 3D transformations, page scrolling, or Z-axis sorting, and so on. This stage generates a layer tree.
  • Then there’s layer drawing, which doesn’t actually draw layers onto the page, but instead generates a drawing list containing the drawing order and drawing instructions
  • Next comes the block generation and rasterization operations, which are submitted to the composition thread when the layer list is ready. The compositing thread will divide the layer into blocks and hand the blocks to the rasterized thread pool, which will generate bitmaps from the blocks. Rasterization may be GPU accelerated, and if GPU accelerated is used, the generated bitmaps will be stored in GPU memory.
  • Once all the blocks have been rasterized, the compositing thread generates a drawquad and submits it to the browser process, which then draws either the compositing thread’s bitmap or GUP’s bitmap content into memory, and finally displays the memory to the screen.

Third, summary

1. Navigation process

  • Enter the URL and press Enter to trigger the beforeUnload event of the current page. If the current page does not beforeUnload or agrees to beforeUnload event, the subsequent process continues

  • The URL is then handed to the network process via IPC communication. The network process first looks for the local cache, returns the requested resource to the browser process if it finds it, and makes a real network request if it doesn’t

  • First the network process does DNS, requesting an IP address

  • Then the TCP connection is made based on the IP address

  • Then build the request, send it to the server, and wait for it to return

  • The network process looks at the status code first. If it is 301 or so, it reconstructs a request based on the domain address provided in the location header. If it is 200, it continues

  • The network process then looks at the content-Type of the response header. If the content-Type is application/ OCtet-stream, the network process submits the data to the download manager, and the navigation ends. In the case of text/ HTML, the data is handed to the browser process and the navigation continues

  • The browser process first sees whether the new page and the old page are from the same site, if it is the same site, the new page will reuse the parent page rendering process; Create a new renderer if it is not for the same site

  • The browser process sends a “submit document” message to the renderer process of the new page, and establishes a pipeline to transfer data. After receiving all the data, the renderer process sends a “confirm submit” command to the browser process. The browser process updates the browser interface state, and the browser appears white screen.

2. Rendering process

DOM tree, styleSheets, layout, layering, layer drawing, block rasterization into bitmap, composition and display

  • The renderer process first converts the HTML into a DOM tree structure that can be read
  • The rendering engine translates CSS styleSheets into styleSheets that browsers can understand, calculating the style of DOM nodes
  • Create a layout tree and calculate the layout information for the elements
  • Layer the layout tree and generate a hierarchical tree
  • Generate a draw list for each layer and submit it to the composition thread
  • Composition threads divide layers into blocks and convert blocks into bitmaps in a rasterized thread pool
  • The composite thread sends the DrawQuad command to the browser process
  • The browser process receives the DrawQuad message and generates a page based on the bitmap and displays it to the browser

What is rearrangement, redrawing and composition

Update element geometry, triggering rearrangement

Recreating the layout tree and then a bunch of browser work

For example, changing the height of an element in JavaScript triggers a rearrangement.

2. Updated the draw attribute of an element, triggering a redraw

The redraw skips the creation of the layout and layer trees and does a bunch of other things

For example, if a color is changed using JavaScript, redraw is triggered.

3. Properties other than the updated geometry and draw properties trigger composition

Composition operates directly on the composition thread.