What happens to the browser’s address bar from entering a URL to rendering the page?

1. URL parsing “Identify URL”

2. Check the cache

There is a cache to render the contents of the cache, there is no request to the server

  • Strong cache, negotiated cache: for resource file requests
  • Local storage: For data requests

3. The DNS

The DNS uses the domain name to find the external IP address of the corresponding server

DNS resolution is performed for each TCP request sent on the website. (If the current domain name is resolved once, the browser will cache the resolution record for about one minute. If the request is sent later using the same domain name, the resolution step will be skipped.

In a real project, for a large website, the resources it requests are distributed to different servers (each server has its own domain name resolution).

  • WEB server (handles requests for static resource files such as HTML/CSS/JS, etc.)
  • Data server (processing data requests)
  • Image server (processing image requests)
  • Audio and Video server
  • .

As a result, we need to resolve DNS many times

Optimization tip: DNS Prefetch is DNS Prefetch

Make page loading (especially later resource loading) smoother and faster

<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//static.360buyimg.com"> <link Rel ="dns-prefetch" href="//misc.360buyimg.com"> <link rel="dns-prefetch" href="//img10.360buyimg.com"> <link Rel ="dns-prefetch" href="//img11.360buyimg.com"> <link rel="dns-prefetch" href="//img12.360buyimg.com">.......Copy the code

4. Establish a connection channel between the client and server based on the TCP three-way handshake.

Information exchange between the client and server can be realized based on HTTP and other transport protocols only after a good connection channel is established

5. The communication between the client and server is implemented based on HTTP or HTTPS

Based on transport protocols such as HTTP, the client passes some information to the server

  • HTTP request packets (all the contents sent by the client to the server are collectively called request packets)
    • Request header
    • Request body
  • Strong and negotiated caching (performance optimization: reduced number of HTTP requests)
    • Strong caching (cache-Control and Expires)
    • Negotiated cache (last-Modified and Etag)

6. The server processes the request

The server receives the request, processes it, and returns the information to the client

When the server returns, it first returns the response header and then continues to return the contents of the response body

7. TCP wave four times to “free up the established network channel”

Return information to the client (four waves of disconnecting TCP)

  • When the client sends the request message to the server, the first wave is used: the client tells the server, I have given you all the request messages, you are ready to close
  • Second wave: initiated by the server, tell the browser, I received the request message, I am ready to close, you are ready;
  • Third wave: initiated by the server, tell the browser, I respond to the message sent, you are ready to close it;
  • Fourth wave: initiated by the browser, tell the server, I respond to the message received, I am ready to close, you are also ready;

Connection: keep-alive Keeps TCP uninterruptable (performance optimization points, reducing the time it takes to re-establish the link channel for each request, four waves are not executed)

8. Client render “render pages and effects”

A complete HTTP transaction

  1. Establish TCP/HTTP transport channels (client and server)
  2. The client sends the request normally
  3. The server returns the information normally
  4. Disconnect the TCP/HTTP transmission channel