What to do after the browser enters the URL

A page from input URL To the page loading display complete , What happened in the process ？
It mainly includes the following basic steps ：

    1. Enter the browser's address bar URL And press enter .
    2. Browser lookup current URL Is there a cache , And compare whether the cache is out of date .
    3.DNS analysis URL Corresponding IP.
    4. according to IP establish TCP Connect （ Three handshakes ）.
    5.HTTP Initiate request .
    6. Server processing request , Browser reception HTTP Respond to .
    7. Render the page , structure DOM Trees .
    9. close TCP Connect （ Four waves ）.

1.URL

Input URL after , It will analyze （URL The essence of is to unify resource locators ）
URL Generally, it includes several parts ：

    1.protocol, Protocol header , For example http, Encrypted https,ftp etc.
    2.host, Host domain name or IP Address
    3.port, Port number （ Usually, port numbers are uncommon because most of them use the default port, so they are hidden , Such as HTTP Default port 80,HTTPS Default port 443.）
    4.path, Directory path
    5.query, Query parameters
    6.fragment, namely # After hash value , It is usually used to locate a certain position

2. cache

According to the logic in the figure below , Determine whether to directly use the cached content or re request resources from the server

3.DNS Domain name resolution

We know that the domain name entered in the address bar is not the real location of the last resource , Domain name is only related to IP A mapping of . Network server IP There are so many addresses , We can't remember a series of numbers , So the domain name came into being , The process of domain name resolution is actually to restore the domain name to IP Address process .
First, the browser checks the local hosts Does the file have this URL mapping relationship , Call this if you have one IP Address mapping , Complete domain name resolution .
If it is not found, it will find the local DNS Parser cache , Return if found .
If it is still not found, it will find the local DNS The server , Return if found .
Finally, iterate the query , By root domain server -> Top-level domain ,.com-> The second domain ,baidu.com -> Subdomain ,www.baidu.com Found in order of IP Address .

4.TCP Connect

After passing the first step DNS After domain name resolution , Got the server's IP Address , In the access to IP After the address , It will start to establish a connection , This is from TCP Agreement completed , Mainly connected by three handshakes .

• The first handshake ： When establishing a connection , The client sends syn package （seq=x） To the server , And enter SYN_SENT state , Wait for server to confirm ;
• The second handshake ： Server received syn package , Must confirm customer's SYN（ack=x+1）, At the same time, I also send a SYN package （seq=y）, namely SYN+ACK package , At this time, the server enters SYN_RECV state ;
• The third handshake ： Client receives server's SYN+ACK package , Send confirmation package to server ACK(ack=y+1）, This package has been sent , Client and server access ESTABLISHED（TCP Successful connection ） state , Complete three handshakes .

Complete three handshakes , Client and server begin to transmit data .

5. Browser to server HTTP request

complete HTTP Request contains request start line 、 Request header 、 The main body of the request consists of three parts .

 

Common request headers （ part ）

Accept: Type of reception , Indicates that the browser supports MIME type
（ It is returned by the benchmarking server Content-Type）
Accept-Encoding： Compression types supported by browsers , Such as gzip etc. , Beyond type cannot receive
Content-Type： The type of entity content sent out by the client
Cache-Control: Specifies the caching mechanism that requests and responses follow , Such as no-cache
If-Modified-Since： Corresponding to the server Last-Modified, Used to match to see if the file changes , It can only be accurate to 1s within ,http1.0 in
Expires： Cache control , No requests will be made during this time , Use cache directly ,http1.0, And it's server time
Max-age： Represents how many seconds the resource is cached locally , No requests will be made within the validity period , It's using caching ,http1.1 in
If-None-Match： Corresponding to the server ETag, Used to match whether the contents of the file have changed （ Very precise ）,http1.1 in
Cookie: Yes cookie And the same domain access will be automatically brought
Connection: How to handle a long connection when the browser communicates with the server , Such as keep-alive
Host： Requested server URL
Origin： Where did the initial request come from （ It's only accurate to the port ）,Origin Than Referer More respect for privacy
Referer： The source of the page URL( Applies to all types of requests , It will be accurate to the detailed page address ,csrf Interception is often used in this field )
User-Agent： Some necessary information of user client , Such as UA Head, etc

 6. The browser receives the response from the server

The server is receiving the HTTP After the request , Will receive HTTP Message encapsulation HTTP Of Request object , And through different Web The server does the processing , The processed results are HTTP Of Response Object returns , It mainly includes the status code , Response head , The response message consists of three parts .
The status code mainly includes the following parts

• 1xx： instructions – Indicates that the request has been received , To continue processing .
• 2xx： success – Indicates that the request was received successfully 、 understand 、 Accept .
• 3xx： Redirect – Further action must be taken to complete the request .
• 4xx： Client error – The request has a syntax error or the request cannot be implemented .
• 5xx： Server-side error – The server could not fulfill the legitimate request .
  The response header is mainly composed of Cache-Control、 Connection、Date、Pragma Other components .
  The response body is the information returned by the server to the browser , Mainly by HTML,css,js, Picture file composition .
  Common response headers （ part ）：

Access-Control-Allow-Headers: Requests allowed on the server side Headers
Access-Control-Allow-Methods: Server side allowed request methods
Access-Control-Allow-Origin: Requests allowed on the server side Origin Head （ For example *）
Content-Type： The type of entity content returned by the server
Date： Time the data was sent from the server
Cache-Control： Tell the browser or other customers , What environment can cache documents safely
Last-Modified： The last modification time of the requested resource
Expires： When should the document be considered out of date , So you don't cache it anymore
Max-age： How many seconds should the client's local resources be cached , Open the Cache-Control After it works
ETag： The current value of the entity tag of the request variable
Set-Cookie： Set the associated cookie, The server sends the cookie Pass it to the client
Keep-Alive： If the client has keep-alive, The server will also respond （ Such as timeout=38）
Server： Some information about the server

  The following figure shows a request http A brief analysis of message structure

7. Page rendering

• analysis HTML, structure DOM Trees
• analysis CSS, Generate CSS The rule tree
• Merge DOM Trees and CSS The rules , Generate render Trees
• Layout render Trees （Layout/reflow）, Responsible for the dimensions of each element 、 Calculation of position
• draw render Trees （paint）, Draw page pixel information

• The browser will send the information of each layer to GPU,GPU Will synthesize layers （composite）, It's on the screen

8. close TCP Connect or keep connected

  Close the connection with four waves (FIN ACK, ACK, FIN ACK, ACK).

• The first wave is after the browser sends the data , send out FIN Request disconnect .
• The second wave is sent by the server ACK Consent , If at this time the server also sends FIN There seems to be nothing wrong with asking to disconnect , But considering that the server may have data to send , So the server sends FIN It should be in the third wave .
• So the browser needs to return ACK Consent , The fourth wave .