Generally speaking, it can be divided into the following processes:

  1. Cache parsing
  2. The DNS
  3. A TCP connection
  4. The browser sends an HTTP request
  5. The server processes the request and returns HTTP packets
  6. The browser parses the rendered page
  7. TCP Disconnection

The specific process

1. Cache resolution

First go to the cache to find resources, if there are resources in the cache directly from the cache

Cache resource search route: browser cache (offline cache, memory cache, hard disk cache) -> caches of various intermediate proxy servers (e.g. CDN cache)

The browser cache mechanism is detailed in the Browser series – Browser cache

CDN cache mechanism see browser series – CDN cache

2. The DNS

  • The Domain Name System (DNS) is a Domain Name and IP addressMutual mappingOne of theDistributed database.
  • The DNSIs fromThe domain nameMap toThe IP addressThe process of
  • In addition, if some sites have already been visited, the next time you visit them, the browser will follow upBrowser cache,System cache,Router cache,ISP caching,Root DNS server,Top-level domain name server,Master domain name serverIt looks for an IP address, so it’ll be faster next time
  • Other HTTP pages do this automaticallyThe DNS resolution beforehand, it isParsing in advanceThe domain name may be used later, and the result will be parsedCache to system cache, shorten DNS resolution time, improve website access speed (<meta>or<link>Label control)

For a detailed explanation of DNS, see the browser series DNS Resolution and pre-resolution

3. A TCP connection

Knowing the IP address of the server, the next step is to establish a connection with the server

One caveat here is that Chrome requires a maximum of six TCP connections in the same domain at any one time, and any more will have to wait.

Assuming that there is no need to wait, we are now in the TCP connection setup phase. Let’s first look at what TCP is:

TCP is a kind ofconnection-orientedThe,Reliable ` `And based onByte streamtheTransport layer communication protocol
Copy the code

The following three processes are required to establish and disconnect a TCP connection:

  1. By three handshakes (i.e. total sentThree packetsVerify that a connection is established.) Establishes a connection between the client and the server.
  2. forThe data transfer. Every data transfer goes throughThe packetIs transmitted in the form of. And each time the receiver receives a packet, it must send it to the senderconfirm(Packet check), ifThe senderIf you don’t receive this confirmation, it’sPacket lossAnd,To resendThe packet
There is an optimization strategy for sending: namely'Break up the big packet into small packets'And are transmitted to the receiver in sequence according to the packet order` assembly `Complete packets so that the whole packet is not said to be lost'Retransmit the whole packet', but only'For some missing packet'It's just retransmittingCopy the code
  1. Disconnection phase. Data transfer complete, now to disconnect, throughFour times to waveTo disconnect.

From this we can see how TCP ensures the reliability of information transmission: first, the three-way handshake to confirm the connection; second, the packet check to ensure that the data reaches the receiver; third, the four-time wave to disconnect the connection

For an in-depth look at TCP connections, see the computer Networking series – TCP’s Three-way handshake, Four-way Wave

4. Interaction between browser and server

Data is transferred between the browser and the server. Each data transfer is in the form of a packet (request packet + response packet).

The browser sends an HTTP request as a request packet, and the server responds as a packet called a response packet

4.1. The browser sends an HTTP request

HTTP request packet

Now that the TCP connection is established, the browser can communicate with the server. That is, the browser sends HTTP requests. There are three things to carry in the request:The request line,Request headerandRequest body

  • Request Line (Request method + HTTP Version)
// The request method is GET, the path is the root path, and the HTTP version is 1.1
GET / HTTP/1.1
Request method + HTTP protocol version
POST / HTTP/1.1
Copy the code

See the differences between GET and POST in the Computer Networking series, GET and POST

  • Request Header Header
Accept: / * browser support * / text/HTML MIME type, application/XHTML + XML, application/XML. Q = 0.9, image/webp image/apng, * / *; Q = 0.8, application/signed - exchange; V =b3 Accept-encoding: gzip, deflate, br /* Accept-language: zh-cn,zh; Q =0.9 /* Browser support language */ cache-control: no-cache /* no Cache is created */ if-modified-since: If- none-match: Pragma: no-cache Cookie: Pragma: no-cache Cookie: Pragma: no-cache Cookie: /* Connection: keep-alive /* Connection: keep-alive /* Host: www.baidu.com /* domain name */ upgrade-insecure -Requests: 1 User-agent: /* User Agent */ Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1Copy the code
  • Request Body Body

The request body exists only in the POST method, a common scenario being form submission

See the computer Networking series HTTP for a detailed explanation of HTTP/HTTPS requests

4.2. The server responds to the request

HTTP response packet

The HTTP request arrives at the server and the server processes it. Finally, the data is passed to the browser, which is returnedThe network responseSimilar to the request part, a network response has three parts:Response line,Response headersandResponse body

  • Response Line (HTTP Version + Status code + State description)
The HTTP version is 1.1, the status code is 200, and the status description is OK
HTTP/1.1 200 OK
Copy the code

For other status codes, see the computer network series – HTTP status code

  • The response headers
Cache-control: no-cache Connection: keep-alive /* Establishes a persistent link */ content-encoding: gzip content-type: text/ HTML; Charset = UTF-8 Date: Wed, 04 Dec 2019 12:29:13 GMT /* Response time */ Age: /* Response duration */ Server: Apache /* Name and version of server application software */ set-cookie: rsv_i= XXX; path=/; Domain=.baidu.com /* the server sends cookies */Copy the code
  • Response Body Body

What happens when the response is complete? Does the TCP connection break down? Not necessarily. If the request header or response header contains Connection: keep-alive, it indicates that a persistent Connection has been established. In this way, the TCP Connection will remain Alive and the resources of the unified site will reuse this Connection. Otherwise, the TCP connection is disconnected and the request-response process ends

5. The browser renders the page

  1. Rendering and displaying pages before the browser has fully received the HTML file;
  2. When executing code in HTML, the browser continues to request images, CSS, JavsScript, and so on, as needed, in the same way it requests HTML

The detailed process of browser rendering can be found in browser series – Principles and process of rendering

6. TCP disconnects the connection with a wave

  1. The host sends a disconnection request to the server (it’s late, I should go);
  2. The server receives the request and sends a signal to acknowledge receipt of the request (known).
  3. The server sends a disconnect notification to the host (it’s time for me to go too);
  4. The host disconnects when it receives the disconnection notification and sends back an acknowledgement (yes, ok), and the server disconnects when it receives the acknowledgement;

TCP disconnection see the computer Networking series — TCP’s three-way handshake, Four-way Wave

How to optimize page loading

Improving page loading speed is really important, see the browser series – Optimizing page loading