[web] what happens after entering the URL from the address bar?

The whole process from browser to server is the most basic knowledge of front-end development , The more basic it is, the easier it is to be ignored , Here is also a thought note .

Domain name judgment

Before entering the address field , The browser will check the input , If it is a correct one that conforms to the format url Will execute DNS analysis , If not , For example, some strings are input , Then the search function will be executed . Pictured ：

DNS analysis

DNS Analytic process

First , When visiting a website, you can't find the corresponding server just by one URL , But need a ip Address . The website is just for your convenience , Not an exact address .

such as , I need to call someone , I know this man's name is useless , I have to look up his telephone number through the telephone book , So I can call him . And this corresponds to

• The person's name Namely website
• Phone number Namely IP
• Find the phonebook Namely DNS analysis

and DNS The analysis of is not as simple as looking up the phone book from beginning to end , It's a step-by-step search , Here is a picture I drew DNS Analysis flow chart .

First , Type in the browser www.qq.com after , Input url Execute according to the address format DNS analysis . and DNS The parsing steps are ：

• First step ： Find a local domain name server , see www.qq.com Of this domain ip How much is the . With the return IP Address , If not, proceed to the next step .
• The second step ： Find the root DNS server , see www.qq.com Of this domain IP How much is the , With the return IP Address , If not, proceed to the next step .
• The third step ： Find a top-level domain name server , see www.qq.com This domain name IP How much is the , With the return IP Address , If not, proceed to the next step .
• Step four ： The top-level domain name server knows the address of the domain name server , From the search domain name server IP The address to return .

Let's also explain , One url How to divide the root domain name , And top-level domain names .

for example ： This domain name ： www.ac.qq.com

His domain name distribution is like this ： www( host ). ac( Three level domain name ). qq( Two level domain name ) .( Root domain name ) .com( Top-level domain name )

DNS Optimize

DNS Cache and DNS Redirection is DNS An important means of optimization , The core is to reduce the number of requests .

DNS cache

From the above process, we know ,DNS The analysis of is layer by layer , Find and return ip Address . that , In this process, you can also find ip Keep the address , You can read directly next time .

DNS Cache is to find the IP Address , Temporarily preserved , And this one is preserved ip There are also many links . such as , Browser cache , Cache of the client system itself , Router cache , Root domain server cache ,ISP Server cache .

such as , Browser cache , At the second request , There is no need to analyze layer by layer , The browser has recorded the ip Address , Just visit directly .

DNS Redirect

DNS Redirection is to shorten the requested distance , It can be given according to the server closest to the user or with a small load ip Address , This is also called DNS Load balancing .

Used all the time CDN resources , This principle is also used ,DNS The server will return a user's most recent ip Address ,CDN The server of the node is responsible for providing data in response .

Confirm connection （ Three handshakes ）

After a DNS After parsing , After confirming the location of the server , Start making requests , And this process we call “ Three handshakes ”.

Once on a talk show, there was an engineer named Pangbo , He explained in the simplest language what three handshakes are , I still remember , That's what it says , There is a man knocking at the door ：

• Kowtow Kowtow Kowtow , Is anybody there, please ？
• Someone is here. .
• well .

This is three handshakes .

Here is a brief description of the process of three handshakes , Pictured ：

• First request ： The client sends one SYN=1,Seq=X To the server , Become the first handshake
• Second request ： The server returns a SYN=1 ,ACK=X+ 1 The response packet of indicates that the request has been received , This is called the second handshake
• A third request ： The client sends back another ACK=Y + 1,Seq= Z Data packets of , Indicates that the handshake is over .

The reason why it takes three times instead of two , The reason is to prevent the invalid request message from being transmitted to the server . Like , The client sent a request A To server , request A It has not reached the server yet because of the delay ,

This is the time , The client sent another request B , At this time, the server receives .

When received , request A It's also here , And the server mistakenly thinks Is a new request , Well then A Connect the , And send a confirmation to the client , But at this time, the client's request is not the previous one , There will be mistakes .

Send a request

After three handshake confirmations , Start to launch Request message .HTTP The request of is to construct the request message and pass at the same time tcp

The protocol is sent to the specified server port .

HTTP Agreement is 80/8080,HTTPS The port of is 443

The requested message is sent by the requesting line , Request header , Request blank line and request body .

• Request line ： The request line contains url Information and Requested method , such as post get put delete Other methods .
• Request header ： Contains additional information such as commonly used Cookie, User-Agent , Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization Equal parameter ,
• Request body ： Contains some parameter information , Now the requested data format is generally json, You need to set Content-Type: application/json.

The server returns data

response message

Response message from response line 、 Response head 、 The response body consists of three parts .

• Response line ： Contains some status code protocols and versions
• Response head ： Contains the following additional information , These include Connection This will return a keep-alive Tell the browser that you don't need to disconnect after connecting TCP Connect
• Response body ： Storage warehouse of content data , For example, some strings or some static resources .

Corresponding status code The general parameter explanation is ：

• 1xx The request has been successfully received for ;
• 2xx Indicates that the request was successful
• 3xx Indicates redirection
• 4xx Indicates a client error
• 5xx Indicates a server error

The front-end students only need to see 5xx, Then it's time to find your backstage buddy .

Browser rendering

The browser is a process of parsing and rendering over and over again , The browser is getting html After the text It will be parsed , Then load other css perhaps js Wait for the documents .

The request depends on the browser , The number of concurrent requests is also different , For example, concurrent requests like Google Chrome are 6 Time . The loaded resources do not necessarily come back in order , Some small files may be returned first .

Here's a little dot , It's very common to ask something js The loading of the file is placed at the bottom , The reason is to ensure that some node operations are performed only after the node is generated , Otherwise, the binding operation will be invalid before the node is generated .

Rendering process

The process of page rendering , Roughly divided into 5 A process ：

1. according to HTML Parse generation DOM Trees ;
2. according to CSS Analytical production CSS The rule tree ;
3. aggregate DOM Trees and CSS The rule tree Generate render tree ;
4. according to render tree Calculate node information ;
5. Render according to the calculated node information ;

Arrange it as shown in the picture ：

there layout Why double line arrows , Because if the layout node changes, the reflow calculation will be triggered , We'll do it later paint .

disconnect

Four waves

When the data transmission is finished , This is when you need to disconnect tcp agreement , Also known as four waves , The process is ：

1. Initiated by the active party FIN,ACK,SEQ message , Indicates that the data has been transferred , First wave .
2. The passive party receives and initiates ACK,SEQ message Consent to close , Second wave .
3. The passive party requests to close the connection , Third wave .
4. After the active party confirms the closed message , Close the connection , Fourth wave .

Here's the picture ：

summary

HTTP If we dig deep into the agreement, there are still many things , Generally, you don't need to eat everything thoroughly , But the general process still needs to be understood . At least make it clear what happened .

---

image Strawberry snow is too sweet ..

Welcome to leave a message on my backstage @GavinUI