一、獲取IP地址

通過DNS將URL解析成IP地址

IP地址對應(yīng)一臺真實的物理機(jī)器，而且IP地址就像人的身份證是唯一的，用戶請求服務(wù)器，只需要輸入為該服務(wù)器分配的唯一的IP地址即可。但由于IP地址不便于記憶，因而使用較為語義化的域名來替代IP地址，而且一個域名可能對應(yīng)了對個IP地址，比如用戶輸入www.baidu.com,該域名下對應(yīng)了多個IP，域名解析服務(wù)器會根據(jù)一定的規(guī)則分配給用戶其中一個IP地址。

DNS解析過程：

1. 向瀏覽器的緩存中查找；如果沒有則進(jìn)行下一步;
2. 向系統(tǒng)緩存（本地的hosts文件）中查找；如果沒有則進(jìn)行下一步；
3. 向路由器查詢DNS緩存；如果沒有則進(jìn)行下一步；
4. 向ISP(運(yùn)營商)DNS緩存中查找（比如電信）如果沒有則進(jìn)行下一步；
5. 向根域名服務(wù)器 => 頂級域名服務(wù)器中查找

tips：這里使用 DNS預(yù)解析 ，可以根據(jù)瀏覽器定義的規(guī)則，提前解析之后可能會用到的域名，使解析結(jié)果緩存到系統(tǒng)緩存中，縮短DNS解析時間，來提高網(wǎng)站的訪問速度。

二、TCP/IP三次握手建立連接

知道了服務(wù)器的IP地址后，瀏覽器利用tcp協(xié)議通過三次握手與服務(wù)器建立連接

TCP的三次握手四次揮手傳送門

建立連接需要三個過程（三次握手）：

1. 客戶機(jī)向服務(wù)器發(fā)送一個建立連接的請求（客戶機(jī)向服務(wù)器撥打電話）
2. 服務(wù)器接到請求后發(fā)送同意連接的信號（服務(wù)器接聽電話）
3. 主機(jī)接到同意連接的信號后，再次向服務(wù)器發(fā)送了確認(rèn)信號（客戶機(jī)：“喂喂喂，聽得到嗎？”）

為什么要進(jìn)行三次握手？如果是兩次握手，如下面的對話只有前兩句，有可能出現(xiàn)的問題是：客戶端之前發(fā)送了一個連接請求報文，由于網(wǎng)絡(luò)原因滯留在網(wǎng)絡(luò)中，后來到達(dá)服務(wù)器端，服務(wù)器接收到該請求，就會建立連接，等待客戶端傳送數(shù)據(jù)。而此時客戶端壓根就不知道發(fā)生了什么，白白造成了服務(wù)器資源浪費(fèi)。

image

三、瀏覽器向web服務(wù)器發(fā)送http請求

客戶機(jī)與服務(wù)器建立TCP/IP連接后就可以通信了。

1. 瀏覽器根據(jù)解析到的IP地址和端口號發(fā)起HTTP請求，HTTP請求包括header和body。header中包括請求的方式（get和post）、請求的協(xié)議 （http、https、ftp）、請求的地址ip、緩存cookie。body中有請求的內(nèi)容。例如：GET https://www.google.com/ HTTP/1.1
2. 服務(wù)器接到請求后，會根據(jù) HTTP 請求中的內(nèi)容來決定如何獲取相應(yīng)的 HTML 文件
3. 服務(wù)器將得到的 HTML 文件發(fā)送給瀏覽器
   .

get會產(chǎn)生一個tcp數(shù)據(jù)包，post則是兩個（GET和POST最詳細(xì)的總結(jié)傳送門）

• get請求時，瀏覽器會把headers和data一起發(fā)送出去，服務(wù)器響應(yīng)200（返回數(shù)據(jù)），
• post請求時，瀏覽器先發(fā)送headers，服務(wù)器響應(yīng)100 continue， 瀏覽器再發(fā)送data，服務(wù)器響應(yīng)200（返回數(shù)據(jù)）。

.

客戶端請求靜態(tài)資源和動態(tài)資源：

1. 靜態(tài)資源：如果客戶端請求的是靜態(tài)資源，則web服務(wù)器根據(jù)URL地址到服務(wù)器的對應(yīng)路徑下查找文件，然后給客戶端返回一個HTTP響應(yīng)，包括狀態(tài)行、響應(yīng)頭和響應(yīng)正文。
2. 動態(tài)資源：如果客戶端請求的是動態(tài)資源，則web服務(wù)器會調(diào)用CGI/VM執(zhí)行程序完成相應(yīng)的操作，如查詢數(shù)據(jù)庫，然后返回查詢結(jié)果數(shù)據(jù)集，并將運(yùn)行的結(jié)果--HTML文件返回給web服務(wù)器。Web服務(wù)器再將HTML文件返回給用戶。

四、瀏覽器渲染

瀏覽器拿到HTML文件后，根據(jù)渲染規(guī)則進(jìn)行渲染：

1. DOM 樹：解析 HTML 構(gòu)建 DOM(DOM 樹)
2. CSS 樹：解析 CSS 構(gòu)建 CSSOM(CSS 樹)
3. 渲染樹：CSSOM 和 DOM 一起生成 Render Tree(渲染樹)
4. 布局（layout）：根據(jù)Render Tree瀏覽器就知道網(wǎng)頁中有哪些節(jié)點(diǎn)，以及各個節(jié)點(diǎn)與 CSS 的關(guān)系，從而知道每個節(jié)點(diǎn)的位置和幾何屬性（重排）
5. 繪制（Paint）：根據(jù)計算好的信息繪制整個頁面（重繪）

瀏覽器渲染過程傳送門

五、四次揮手?jǐn)嚅_連接

客戶端沒有數(shù)據(jù)發(fā)送時就需要斷開連接，以釋放服務(wù)器資源。

TCP的三次握手四次揮手傳送門

image

1. 客戶端：我沒有數(shù)據(jù)要發(fā)送了，打算斷開連接
2. 服務(wù)器：你的請求我收到了，我這還有數(shù)據(jù)沒有發(fā)送完成，你等下
3. 服務(wù)器：我的數(shù)據(jù)發(fā)送完畢，可以斷開連接了
4. 客戶端：ok，你斷開連接吧（客戶端獨(dú)白：我將在2倍的最大報文段生存時間后關(guān)閉連接。如果我再次收到服務(wù)器的消息，我就知道服務(wù)器沒有收到我的這句話，我就再發(fā)送一遍）。

最終服務(wù)器收到該客戶端發(fā)送的消息斷開連接，客戶端也關(guān)閉連接。