這道題太經(jīng)典了，因為它涉及到太多的知識點。回流重繪、瀏覽器渲染原理、event loop 和 TCP連接斷開的方式等。

主要過程如下。

一、DNS解析：url解析成ip地址和對應(yīng)的端口號

網(wǎng)絡(luò)進程會先從DNS數(shù)據(jù)緩存服務(wù)器查找是否緩存過當(dāng)前域名信息，有則直接返回，否則，會進行DNS解析成對應(yīng)的ip和端口號。

二、建立TCP連接：通過三次握手與服務(wù)器建立連接，然后進行數(shù)據(jù)傳輸

第一次握手，發(fā)送SYN報文。
客戶端主動向服務(wù)器發(fā)送請求建立連接的報文SYN，客戶端會隨機初始化一個序列號x，然后把SYN的標(biāo)志置為1，之后客戶端處于SYN-SENT的狀態(tài)。
SYN=1 seq=x

第二次握手，發(fā)送SYN + ACK報文。
服務(wù)端接收到客戶端的報文后，服務(wù)端也會隨機初始化一個序列號y，對請求的應(yīng)答做響應(yīng)，即ack=x+1，接著把SYN和ACK的標(biāo)志置為1，之后服務(wù)端處于SYN-RCVD狀態(tài)。
SYN=1 ACK=1 seq=y ack=x+1

第三次握手，發(fā)送ACK報文。
客戶端接受到服務(wù)端的報文后，對應(yīng)答號進行回應(yīng)ack=y+1，把ACK的標(biāo)志置為1，序列號為x+1，返回確認(rèn)的報文給服務(wù)端，服務(wù)端接到確認(rèn)報文后進入連接的狀態(tài)，此時TCP連接成功。
ACK=1 ack=y+1 seq=x+1

三、客戶端發(fā)送HTTP請求：把輸入的地址封裝成HTTP Request請求行，發(fā)送給服務(wù)器

請求行 = 請求方法 + 請求url + HTTP版本 + 請求頭。

四、服務(wù)端返回資源

服務(wù)器收到請求后，響應(yīng)報文，返回資源。

五、瀏覽器渲染頁面

1、html被html解析器解析成DOM Tree，css被css解析器解析成CSSOM Tree（并行解析）；
2、DOM Tree 和 CSSOM Tree 合并到一起，形成 Render Tree ；
3、重排，根據(jù)渲染樹計算出每個節(jié)點的幾何信息，位置及大小；
4、重繪，繪制渲染出最終的頁面。

六、斷開TCP連接：通過四次揮手?jǐn)嚅_連接

第一次揮手，發(fā)送FIN報文。
客戶端發(fā)送FIN=1，序列號seq=x的報文，進入FIN_WAIT_1的狀態(tài)。

第二次揮手，服務(wù)端發(fā)送ACK報文。
服務(wù)端接受到客戶端報文后，會給客戶端發(fā)送一個ACK的報文，表示收到了。服務(wù)端進入CLODED_WAIT狀態(tài)，客戶端進入FIN_WAIT_2狀態(tài)。

第三次揮手，服務(wù)端發(fā)送FIN報文。
服務(wù)端處理完數(shù)據(jù)，也會向客戶端發(fā)送一個FIN報文，服務(wù)端進入LAST_ACK狀態(tài)。

第四次揮手，客戶端發(fā)送ACK報文。
客戶端收到服務(wù)端FIN報文后，會向服務(wù)端發(fā)送一個ACK的報文，表示收到了。然后客戶端進入TIME_WAIT狀態(tài)，服務(wù)端收到ACK報文后進入CLOSED狀態(tài)。至此連接斷開。

總結(jié)

以上是生活随笔為你收集整理的一道经典面试题：从输入url到页面显示经历了什么？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。