What happens from URL input to browser rendering

This topic has always been old talk, I believe that many people know these steps, but I believe that there are still many friends do not know these steps in each step of the specific what, here I put them one by one to the analysis, I hope to help you better understand.

DNS domain name resolution 2. The browser establishes a connection with the server 3. The server returns data to browser 4. The browser takes the data and renders it

So let me go through what I did in each of these steps

1.DNS domain name resolution

1. The browser checks whether the corresponding IP address exists in the cache

2. If no browser detects the corresponding IP address in the host file of your system, for example, Windows is C:\Windows\System32\drivers\etc\hosts, Linux is configured in /etc/hosts

3. If no browser sends a request to the LOCAL LDNS server, it is usually the server of the network provider, such as China Telecom, China Mobile, China Unicom, etc

4. If no LDNS sends a request to the root DNS server, the root DNS server returns a primary domain name gLTD (for example,.com.cn

5.LDNS sends a request to the primary domain name gLTD

6. GLTD sends a request to the DOMAIN name service provider, obtains the IP address and TTL value of the domain name, and returns the request to LDNS

7.LDNS gets the returned IP address and TTL and stores them. The specific storage time is controlled by TTL

8. The LDNS returns the result to the browser. The browser stores the result in the local system cache based on the TTL value

2. Establish a connection between the browser and the server

This step is mainly about the three-way handshake and four-way wave of the TCP connection

Three handshakes:

1. The client sends a SYN packet (seq=x) to the server and enters the SYN_SEND state 2. When the server receives a SYN packet, it must acknowledge ACK=(x+1) and send a SYN packet (SEq = Y) to the client. In this case, the server enters the SYN_RECV state. After receiving the ACK+SYN message from the server, the client sends ACK=(y+1) to the server. If the ACK packet is successfully sent, the TCP connection is successful

Four waves:

1. The client sends the FIN flag and sequence number seq= U to the server to terminate the TCP connection. The client enters fin-WaI-1 phase (half-closed state) 2. Upon receiving the FIN, the server replies with ACK= U +1 and ACK= U +1, and prepares to release the connection from the server to the client. In this case, the server enters the close-wait phase (half-closed state) 3. After closing the TCP connection, the server sends a FIN=1,ACK=1, SEq = W,ACK= U +1 message to the client. The server ends the close-wait phase and enters the last-ACK phase. And stops sending data from the server to the client, but the server can still receive data from the client. 4. After receiving the packet from the server, the client confirms that the server is ready to disconnect and sends ACK=1, seq=u+1, ACK= w+1 to the server. Then the client waits for 2MSL in the time-wait phase and disconnects.

Why “shake hands” three times and “wave hands” four times?

When establishing a connection, the passive server completes the CLOSED phase and enters the Handshake phase without any preparation. It can directly return SYN and ACK packets to start establishing a connection.

When releasing a connection, the passive server receives a request from the active client to release the connection but cannot release the connection immediately because necessary data needs to be processed. Therefore, the server sends an ACK message to confirm receipt of the packet and then returns a FIN packet to release the connection after the close-wait phase is complete

Why do clients WAIT for 2MSL in time-wait?

When the client sends the final ACK packet, it is not certain that the server can receive the ACK packet. Therefore, after the client sends the ACK acknowledgement packet, it sets a timer for 2MSL. MSL indicates the Maximum Segment Lifetime. 2MSL indicates the maximum duration for FIN packets sent by the server and ACK packets sent by the client to remain valid.

3. The server returns data to the browser

The main point here is the server status code (200（from memory chche),200(from disk cache),304), including mandatory cache, negotiated cache

By default, the browser will force the cache query first. If the conditions are not met, the browser will query the negotiation cache

Mandatory cache

If a strong cache is hit, the browser does not send any request to the server. Instead, it reads the cache file directly and returns a status code of 200(from memory chche) or 200(from disk cache).

200 (from memory cache) : the resource is loaded and cached in the memory. The resource is directly read from the memory. When the browser closes, the data is wiped clean.

200 (from disk cache) : the resource has been loaded and cached in the hard disk. The resource is directly read from the hard disk. When the browser is closed, the cache will not be cleared.

Enforce a cache hit condition

1.Expires(http1.0) : Expires at which the browser will read the cache if set.

Cache-control (http1.1) : The common Settings are as follows

S-maxage: this is the same as max-age, but only for proxy caching. No-store: no cache. No-cache: no cache. If the browser is forced to send a request to the server each time and the server verifies whether the request meets the cache conditions, the mandatory cache is skipped and the negotiated cache is replaced. Public: the request can be cached by any cache. Private: The request can only be cached by individual users, not by the proxy server

Cache-control takes precedence if both cache-control and Expires exist

Negotiate the cache

Send a request to the server. The server will determine whether the request header meets the negotiation cache based on some parameters in the request header. If yes, the server will return the status code 304

Negotiates a cache hit condition

1. The last-modified/if modified – since (http1.0) :

Last-modified: The Last time the browser sent the resource to the server

If-modified-since: After the server receives the request if-Modified-since will be compared with last-mo______. If the difference is large then the data was updated and the server will return the new resource and the status code 200. If the difference is small, If no data is updated, the browser cache is read and the status code 304 is returned

2. The Etag/if – none – match (http1.1) :

Etag: generated by the server and returned to the client to help the server verify the cache. The default value of Etag is the hash value generated by the size, INode, and time of the file

If-none-match: After receiving the request, the server compares the Etag with if-none-match and determines whether to return 200 or 304

If both Etag and Last-Modified exist, Etag has a higher priority

4. The browser gets the data and renders it

This process involves knowledge mainly including browser rendering process

The browser’s rendering process

1. Parse HTML to build a DOM tree. 2. Parse CSS to build a CSS rule tree 3. Execute javascript, load and execute JAVASCIPT code 4. Build rendering tree, according to the DOM tree, CSS rule tree, generate rendering tree 5. Layout, according to the rendering tree node layout on the screen 6. Draw, traversing the nodes of the render tree, adding a style for each node

CSS Parsing rules

1.CSS blocks page rendering 2.CSS blocks JS execution

JS parsing rules

1.js will block rendering of the page 2.js sequential execution, blocking subsequent JS logic execution 3. Asynchronous JS does not block page rendering (script tag with defer) 4. Asynchronous JS download does not block page rendering, execution blocks page rendering (script tag with async)

At this point, all the process is resolved, like and have questions friends welcome to comment