Url input to page rendering flow:
It is mainly divided into the following parts:
1. Perform DNS resolution by domain name
2. TCP three-way handshake establishes a connection
3. The browser sends an HTTP request
4. The server responds to the browser request
The browser receives the resource and renders it
6. Close the connection with four waves
1. Domain name resolution
Domain name resolution consists of the following steps (www.baidu.com) :
1. Check whether there is a corresponding resource in the browser’s cache
2. The browser does not match the query in the hosts file of the host. If yes, the browser returns the corresponding IP address
3. If all else fails, go to your local domain name server (usually one of the servers closest to you).
4, the above are not queried to the time will go, the root domain name server to query. .com–>baidu.com–>www.baidu.com
Possible problems:
Why do URLS need parsing encoding?
HTML how to do DNS optimization
How does data travel through the network?
2. TCP three-way handshake establishes a connection
TCP three-way handshake
SYN=1, seq=t (random sequence number)
2. The server sends SYN=1, ACK= t+1, ACK=1, SEq =w
3. The browser sends ack=w+1, ACK=1, seq=t+1
The connection is made.
3. The browser sends the request:
It involves strong caching and negotiated caching, (to be a little more specific) (heuristic caching)
A strong cache hit is a strong cache hit, based on the value in cache-control.
If the request is not hit, the negotiation cache is queried. If the request is sent to the server, the last-Modified and Etag are used to determine whether the cache is hit. If the cache is hit, 304 is returned; if the cache is not hit, the request information and 200 status code are returned.
4. The server segment responds to the request
Similar to strong and negotiated caching.
5. The browser receives the resource and renders the page
1, first generate DOM tree according to HTML (DOM tree and HTML object difference, DOM tree is stored in memory, can be accessed and operated by JavaScript tree object, through the document view),
StyleSheets (document. StyleShheets) file is generated according to CSS, and then some attribute values are standardized, such as color: Blue, 2REM, converts to rGBA () and 32px and calculates the style of each node in the DOM tree
3. Execute JS code
4. Generate a rendering tree according to DOM tree and CSSOM, and calculate the layout and geometric position for rendering.
6. Disconnect with 4 waves
The TCP protocol is full-duplex, so the disconnect needs an edge to disconnect.
1. The browser sends a disconnect request to the server. FIN=1, seq=t
2. The server replies to the browser with ack=t+1, ACK=1, seq=w
FIN=1, SEQ = M, ACK= T +1, ACK=1
4, browser corresponding server, ACK=1, ACK= m+1, seq=v
Keep it in your head, the references are good, they go into more detail.
Reference:
Juejin. Cn/post / 684490…
Time.geekbang.org/column/intr…
Juejin. Cn/post / 692867…
Blog.csdn.net/qq_38218238…
Juejin. Cn/post / 684490…
Segmentfault.com/a/119000002…