這道題太經(jīng)典了，因?yàn)樗婕暗教嗟闹R(shí)點(diǎn)。回流重繪、瀏覽器渲染原理、event loop 和 TCP連接斷開的方式等。

主要過程如下。

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

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

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

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

第二次握手，發(fā)送SYN + ACK報(bào)文。
服務(wù)端接收到客戶端的報(bào)文后，服務(wù)端也會(huì)隨機(jī)初始化一個(gè)序列號(hào)y，對(duì)請(qǐng)求的應(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報(bào)文。
客戶端接受到服務(wù)端的報(bào)文后，對(duì)應(yīng)答號(hào)進(jìn)行回應(yīng)ack=y+1，把ACK的標(biāo)志置為1，序列號(hào)為x+1，返回確認(rèn)的報(bào)文給服務(wù)端，服務(wù)端接到確認(rèn)報(bào)文后進(jìn)入連接的狀態(tài)，此時(shí)TCP連接成功。
ACK=1 ack=y+1 seq=x+1

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

請(qǐng)求行 = 請(qǐng)求方法 + 請(qǐng)求url + HTTP版本 + 請(qǐng)求頭。

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

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

五、瀏覽器渲染頁面

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

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

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

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

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

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

總結(jié)

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

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