[[401931]]

本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。

 一、簡(jiǎn)單分析

簡(jiǎn)單的分析，從輸入 URL到回車(chē)后發(fā)生的行為如下：

• URL解析
• DNS 查詢
• TCP 連接
• HTTP 請(qǐng)求
• 響應(yīng)請(qǐng)求
• 頁(yè)面渲染

二、詳細(xì)分析

URL解析

首先判斷你輸入的是一個(gè)合法的URL 還是一個(gè)待搜索的關(guān)鍵詞，并且根據(jù)你輸入的內(nèi)容進(jìn)行對(duì)應(yīng)操作

一個(gè)url的結(jié)構(gòu)解析如下：

DNS查詢

在之前文章中講過(guò)DNS的查詢，這里就不再講述了

整個(gè)查詢過(guò)程如下圖所示：

最終，獲取到了域名對(duì)應(yīng)的目標(biāo)服務(wù)器IP地址

TCP連接

在之前文章中，了解到tcp是一種面向有連接的傳輸層協(xié)議

在確定目標(biāo)服務(wù)器服務(wù)器的IP地址后，則經(jīng)歷三次握手建立TCP連接，流程如下：

發(fā)送 http 請(qǐng)求

當(dāng)建立tcp連接之后，就可以在這基礎(chǔ)上進(jìn)行通信，瀏覽器發(fā)送 http 請(qǐng)求到目標(biāo)服務(wù)器

請(qǐng)求的內(nèi)容包括：

• 請(qǐng)求行
• 請(qǐng)求頭
• 請(qǐng)求主體

響應(yīng)請(qǐng)求

當(dāng)服務(wù)器接收到瀏覽器的請(qǐng)求之后，就會(huì)進(jìn)行邏輯操作，處理完成之后返回一個(gè)HTTP響應(yīng)消息，包括：

• 狀態(tài)行
• 響應(yīng)頭
• 響應(yīng)正文

在服務(wù)器響應(yīng)之后，由于現(xiàn)在http默認(rèn)開(kāi)始長(zhǎng)連接keep-alive，當(dāng)頁(yè)面關(guān)閉之后，tcp鏈接則會(huì)經(jīng)過(guò)四次揮手完成斷開(kāi)

頁(yè)面渲染

當(dāng)瀏覽器接收到服務(wù)器響應(yīng)的資源后，首先會(huì)對(duì)資源進(jìn)行解析：

• 查看響應(yīng)頭的信息，根據(jù)不同的指示做對(duì)應(yīng)處理，比如重定向，存儲(chǔ)cookie，解壓gzip，緩存資源等等
• 查看響應(yīng)頭的 Content-Type的值，根據(jù)不同的資源類型采用不同的解析方式

關(guān)于頁(yè)面的渲染過(guò)程如下：

• 解析HTML，構(gòu)建 DOM 樹(shù)
• 解析 CSS ，生成 CSS 規(guī)則樹(shù)
• 合并 DOM 樹(shù)和 CSS 規(guī)則，生成 render 樹(shù)
• 布局 render 樹(shù)( Layout / reflow )，負(fù)責(zé)各元素尺寸、位置的計(jì)算
• 繪制 render 樹(shù)( paint )，繪制頁(yè)面像素信息
• 瀏覽器會(huì)將各層的信息發(fā)送給 GPU，GPU 會(huì)將各層合成( composite )，顯示在屏幕上

參考文獻(xiàn)

https://github.com/febobo/web-interview/issues/141

https://zhuanlan.zhihu.com/p/80551769