The input

  • The user enters something in the address bar, and the browser determines whether it is a search or a URL. For search content, the address bar uses the default search result to synthesize the URL. If the input content complies with the URL rule, for example, www.baidu.com, the URL: www.baidu.com will be improved
  • Trigger the beforeUnload event, where you can perform some data cleansing or unnavigation before the page exits. When the subsequent flow is not listened to or agreed upon, the page remains the same, and the content of the page is not replaced until the submission stage.

To request

  • The browser process sends the URL request to the network process through interprocess communication (IPC). The network process receives the URL request and initiates the actual URL request process here.

A resource cache

  • The network process looks up whether the local cache has cached the resource. If there is a cached resource, it is returned directly to the browser process. If the resource is not found in the cache, the network request flows directly.

The DNS

  • Parses the URL to return the server IP address
  • DNS resolution is a recursive query process.
  • Browser cache –> system cache –> router cache –> IPS server cache –> root DNS server cache –> TOP-LEVEL DNS server cache –> Primary DNS server cache.
  • When the mapping information is found, it is returned to the local machine, and the intermediate layers are cached.

CDN

  • DNS load balancing: The DNS returns an APPROPRIATE IP address to the user based on factors such as the load on each machine and the geographical distance between the machine and the user. This process is called DNS load balancing, or DNS redirection. Content Delivery Network (CDN) uses DNS redirection technology.
  • Global load balancing system (GSLB) : identifies the local load balancing system (SLB) that is close to the user based on the IP address of the local DNS, and returns the IP address of the SLB to the local DNS.
  • SLB: checks whether the cache server cluster contains the requested resource data. If the cache server cluster contains the requested resource data, the cache server selects the optimal cache node based on the health degree, load, and connection number of the nodes in the cache server cluster and redirects the HTTP request to the optimal cache node.
  • Cache node: The cache node checks whether the requested resource exists or expires and sends the cached resource back to the client directly. Otherwise, the cache node traces the resource until the source site updates the data.

Establish a connection

  • TCP connection: three handshakes, four waves
  • HTTPS: You also need to establish a TLS/SSL connection
  • Send a request: after the connection is established, the browser side will construct the request line, request information, etc., and attach the data such as cookies related to the domain name to the request header, and then send the constructed request information to the server.
  • Server return: The server returns the requested information based on the received information

Processing response information

redirect

  • After receiving the response header returned by the server, the network process begins to parse the response header. If the status code of the server response line contains jump information such as 301 or 302, the network process will read the redirect address from the Location field of the response header and re-initiate the request.

Response data type processing

  • Content-type: Tells the browser what Type of response body data the server is returning. The browser then uses the value of the content-type to determine how to display the response body.
  • Text/HTML: Ready to render
  • Download types such as application/ OCtet-stream: The request is submitted to the browser’s download manager, and the navigation process for the URL request ends.

Ready to render

Rendering process

  • By default, Chrome assigns a rendering process to each page. However, if a new page is opened from one page and belongs to the same site as the current page, the new page will reuse the parent page’s rendering process.
  • Same site: defined as the root domain (for example, geekbang.org) plus the protocol (for example, https:// or http://), plus all subdomains and different ports under the root domain

Submit the document

  • The browser process submits the HTML data received by the web process to the renderer process

Begin to render

Build a DOM tree

  • Browsers can’t understand and use HTML directly, so you need to transform HTML into a structure that browsers can understand — a DOM tree.

Style calculation

  • The purpose of style calculation is to calculate the specific style of each element in the DOM node, which can be roughly divided into three steps.
  • Convert CSS to styleSheets that browsers understand
  • Convert property values in the stylesheet to normalize them, such as em -> px
  • Figure out the specific style of each node in the DOM tree

layout

  • Calculate the geometry of visible elements in the DOM tree and remove invisible nodes.

layered

  • You can visualize the layering of your page by opening Chrome’s Developer Tools and selecting the Layers TAB
  • Elements with cascading context attributes are promoted to a separate layer
  • Places that need to be clipped will also be created as layers.

Composition and display

The end of the navigation

Related links

What happens from entering the URL to displaying the page

Brief analysis of CDN principle

Ramble: how to explain to girlfriend what is CDN?

Follow the animation to learn the TCP three-way handshake and four-way wave

Talk about the HTTPS

New features for decrypting HTTP/2 and HTTP/3