[[312427]]

前言

打開(kāi)瀏覽器從輸入網(wǎng)址到網(wǎng)頁(yè)呈現(xiàn)在大家面前，背后到底發(fā)生了什么?經(jīng)歷怎么樣的一個(gè)過(guò)程?先給大家來(lái)張總體流程圖，具體步驟請(qǐng)看下文分解!

總體來(lái)說(shuō)分為以下幾個(gè)過(guò)程:

• DNS 解析:將域名解析成 IP 地址
• TCP 連接：TCP 三次握手
• 發(fā)送 HTTP 請(qǐng)求
• 服務(wù)器處理請(qǐng)求并返回 HTTP 報(bào)文
• 瀏覽器解析渲染頁(yè)面
• 斷開(kāi)連接：TCP 四次揮手

一、URL 到底是啥

URL(Uniform Resource Locator)，統(tǒng)一資源定位符，用于定位互聯(lián)網(wǎng)上資源，俗稱網(wǎng)址。比如 http://www.w3school.com.cn/html/index.asp，遵守以下的語(yǔ)法規(guī)則：

scheme://host.domain:port/path/filename各部分解釋如下：scheme - 定義因特網(wǎng)服務(wù)的類型。常見(jiàn)的協(xié)議有 http、https、ftp、file，其中最常見(jiàn)的類型是 http，而 https 則是進(jìn)行加密的網(wǎng)絡(luò)傳輸。host - 定義域主機(jī)(http 的默認(rèn)主機(jī)是 www) domain - 定義因特網(wǎng)域名，比如 w3school.com.cn port - 定義主機(jī)上的端口號(hào)(http 的默認(rèn)端口號(hào)是 80) path - 定義服務(wù)器上的路徑(如果省略，則文檔必須位于網(wǎng)站的根目錄中)。filename - 定義文檔/資源的名稱

二、域名解析(DNS)

在瀏覽器輸入網(wǎng)址后，首先要經(jīng)過(guò)域名解析，因?yàn)闉g覽器并不能直接通過(guò)域名找到對(duì)應(yīng)的服務(wù)器，而是要通過(guò) IP 地址。大家這里或許會(huì)有個(gè)疑問(wèn)----計(jì)算機(jī)既可以被賦予 IP 地址，也可以被賦予主機(jī)名和域名。比如 www.hackr.jp。那怎么不一開(kāi)始就賦予個(gè) IP 地址?這樣就可以省去解析麻煩。我們先來(lái)了解下什么是 IP 地址

1.IP 地址

IP 地址是指互聯(lián)網(wǎng)協(xié)議地址，是 IP Address 的縮寫。IP 地址是 IP 協(xié)議提供的一種統(tǒng)一的地址格式，它為互聯(lián)網(wǎng)上的每一個(gè)網(wǎng)絡(luò)和每一臺(tái)主機(jī)分配一個(gè)邏輯地址，以此來(lái)屏蔽物理地址的差異。IP 地址是一個(gè) 32 位的二進(jìn)制數(shù)，比如 127.0.0.1 為本機(jī) IP。域名就相當(dāng)于 IP 地址喬裝打扮的偽裝者，帶著一副面具。它的作用就是便于記憶和溝通的一組服務(wù)器的地址。用戶通常使用主機(jī)名或域名來(lái)訪問(wèn)對(duì)方的計(jì)算機(jī)，而不是直接通過(guò) IP 地址訪問(wèn)。因?yàn)榕c IP 地址的一組純數(shù)字相比，用字母配合數(shù)字的表示形式來(lái)指定計(jì)算機(jī)名更符合人類的記憶習(xí)慣。但要讓計(jì)算機(jī)去理解名稱，相對(duì)而言就變得困難了。因?yàn)橛?jì)算機(jī)更擅長(zhǎng)處理一長(zhǎng)串?dāng)?shù)字。為了解決上述的問(wèn)題，DNS 服務(wù)應(yīng)運(yùn)而生。

2.什么是域名解析

DNS 協(xié)議提供通過(guò)域名查找 IP 地址，或逆向從 IP 地址反查域名的服務(wù)。DNS 是一個(gè)網(wǎng)絡(luò)服務(wù)器，我們的域名解析簡(jiǎn)單來(lái)說(shuō)就是在 DNS 上記錄一條信息記錄。

例如 baidu.com 220.114.23.56(服務(wù)器外網(wǎng)IP地址)80(服務(wù)器端口號(hào))

3. 瀏覽器如何通過(guò)域名去查詢 URL 對(duì)應(yīng)的 IP 呢

• 瀏覽器緩存：瀏覽器會(huì)按照一定的頻率緩存 DNS 記錄。
• 操作系統(tǒng)緩存：如果瀏覽器緩存中找不到需要的 DNS 記錄，那就去操作系統(tǒng)中找。
• 路由緩存：路由器也有 DNS 緩存。
• ISP 的 DNS 服務(wù)器：ISP 是互聯(lián)網(wǎng)服務(wù)提供商(Internet Service Provider)的簡(jiǎn)稱，ISP 有專門的 DNS 服務(wù)器應(yīng)對(duì) DNS 查詢請(qǐng)求。
• 根服務(wù)器：ISP 的 DNS 服務(wù)器還找不到的話，它就會(huì)向根服務(wù)器發(fā)出請(qǐng)求，進(jìn)行遞歸查詢(DNS 服務(wù)器先問(wèn)根域名服務(wù)器.com 域名服務(wù)器的 IP 地址，然后再問(wèn).baidu 域名服務(wù)器，依次類推)

4. 小結(jié)

瀏覽器通過(guò)向 DNS 服務(wù)器發(fā)送域名，DNS 服務(wù)器查詢到與域名相對(duì)應(yīng)的 IP 地址，然后返回給瀏覽器，瀏覽器再將 IP 地址打在協(xié)議上，同時(shí)請(qǐng)求參數(shù)也會(huì)在協(xié)議搭載，然后一并發(fā)送給對(duì)應(yīng)的服務(wù)器。接下來(lái)介紹向服務(wù)器發(fā)送 HTTP 請(qǐng)求階段，HTTP 請(qǐng)求分為三個(gè)部分：TCP 三次握手、http 請(qǐng)求響應(yīng)信息、關(guān)閉 TCP 連接。

三、TCP 三次握手

在客戶端發(fā)送數(shù)據(jù)之前會(huì)發(fā)起 TCP 三次握手用以同步客戶端和服務(wù)端的序列號(hào)和確認(rèn)號(hào)，并交換 TCP 窗口大小信息。

1.TCP 三次握手的過(guò)程如下：

• 客戶端發(fā)送一個(gè)帶 SYN=1，Seq=X 的數(shù)據(jù)包到服務(wù)器端口(第一次握手，由瀏覽器發(fā)起，告訴服務(wù)器我要發(fā)送請(qǐng)求了)
• 服務(wù)器發(fā)回一個(gè)帶 SYN=1， ACK=X+1， Seq=Y 的響應(yīng)包以示傳達(dá)確認(rèn)信息(第二次握手，由服務(wù)器發(fā)起，告訴瀏覽器我準(zhǔn)備接受了，你趕緊發(fā)送吧)
• 客戶端再回傳一個(gè)帶 ACK=Y+1， Seq=Z 的數(shù)據(jù)包，代表“握手結(jié)束”(第三次握手，由瀏覽器發(fā)送，告訴服務(wù)器，我馬上就發(fā)了，準(zhǔn)備接受吧)

2.為啥需要三次握手

謝希仁著《計(jì)算機(jī)網(wǎng)絡(luò)》中講“三次握手”的目的是“為了防止已失效的連接請(qǐng)求報(bào)文段突然又傳送到了服務(wù)端，因而產(chǎn)生錯(cuò)誤”。

四、發(fā)送 HTTP 請(qǐng)求

TCP 三次握手結(jié)束后，開(kāi)始發(fā)送 HTTP 請(qǐng)求報(bào)文。請(qǐng)求報(bào)文由請(qǐng)求行(request line)、請(qǐng)求頭(header)、請(qǐng)求體四個(gè)部分組成,如下圖所示：

1.請(qǐng)求行包含請(qǐng)求方法、URL、協(xié)議版本

• 請(qǐng)求方法包含 8 種：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。
• URL 即請(qǐng)求地址，由 <協(xié)議>：//<主機(jī)>：<端口>/<路徑>?<參數(shù)> 組成
• 協(xié)議版本即 http 版本號(hào)

POST /chapter17/user.html HTTP/1.1 

以上代碼中“POST”代表請(qǐng)求方法，“/chapter17/user.html”表示 URL，“HTTP/1.1”代表協(xié)議和協(xié)議的版本?，F(xiàn)在比較流行的是 Http1.1 版本

2.請(qǐng)求頭包含請(qǐng)求的附加信息，由關(guān)鍵字/值對(duì)組成，每行一對(duì)，關(guān)鍵字和值用英文冒號(hào)“:”分隔。

請(qǐng)求頭部通知服務(wù)器有關(guān)于客戶端請(qǐng)求的信息。它包含許多有關(guān)的客戶端環(huán)境和請(qǐng)求正文的有用信息。其中比如：Host，表示主機(jī)名，虛擬主機(jī);Connection,HTTP/1.1 增加的，使用 keepalive，即持久連接，一個(gè)連接可以發(fā)多個(gè)請(qǐng)求;User-Agent，請(qǐng)求發(fā)出者，兼容性以及定制化需求。

3.請(qǐng)求體，可以承載多個(gè)請(qǐng)求參數(shù)的數(shù)據(jù)，包含回車符、換行符和請(qǐng)求數(shù)據(jù)，并不是所有請(qǐng)求都具有請(qǐng)求數(shù)據(jù)。

name=tom&password=1234&realName=tomson 

上面代碼，承載著 name、password、realName 三個(gè)請(qǐng)求參數(shù)。

五、服務(wù)器處理請(qǐng)求并返回 HTTP 報(bào)文

1. 服務(wù)器

服務(wù)器是網(wǎng)絡(luò)環(huán)境中的高性能計(jì)算機(jī)，它偵聽(tīng)網(wǎng)絡(luò)上的其他計(jì)算機(jī)(客戶機(jī))提交的服務(wù)請(qǐng)求，并提供相應(yīng)的服務(wù)，比如網(wǎng)頁(yè)服務(wù)、文件下載服務(wù)、郵件服務(wù)、視頻服務(wù)。而客戶端主要的功能是瀏覽網(wǎng)頁(yè)、看視頻、聽(tīng)音樂(lè)等等，兩者截然不同。每臺(tái)服務(wù)器上都會(huì)安裝處理請(qǐng)求的應(yīng)用——web server。常見(jiàn)的 web server 產(chǎn)品有 apache、nginx、IIS 或 Lighttpd 等。web server 擔(dān)任管控的角色，對(duì)于不同用戶發(fā)送的請(qǐng)求，會(huì)結(jié)合配置文件，把不同請(qǐng)求委托給服務(wù)器上處理相應(yīng)請(qǐng)求的程序進(jìn)行處理(例如 CGI 腳本，JSP 腳本，servlets，ASP 腳本，服務(wù)器端 JavaScript，或者一些其它的服務(wù)器端技術(shù)等)，然后返回后臺(tái)程序處理產(chǎn)生的結(jié)果作為響應(yīng)。

2.MVC 后臺(tái)處理階段

后臺(tái)開(kāi)發(fā)現(xiàn)在有很多框架，但大部分都還是按照 MVC 設(shè)計(jì)模式進(jìn)行搭建的。MVC 是一個(gè)設(shè)計(jì)模式，將應(yīng)用程序分成三個(gè)核心部件：模型(model)-- 視圖(view)--控制器(controller)，它們各自處理自己的任務(wù)，實(shí)現(xiàn)輸入、處理和輸出的分離。

1、視圖(view)

它是提供給用戶的操作界面，是程序的外殼。

2、模型(model)

模型主要負(fù)責(zé)數(shù)據(jù)交互。在 MVC 的三個(gè)部件中，模型擁有最多的處理任務(wù)。一個(gè)模型能為多個(gè)視圖提供數(shù)據(jù)。

3、控制器(controller)

它負(fù)責(zé)根據(jù)用戶從"視圖層"輸入的指令，選取"模型層"中的數(shù)據(jù)，然后對(duì)其進(jìn)行相應(yīng)的操作，產(chǎn)生最終結(jié)果?？刂破鲗儆诠芾碚呓巧瑥囊晥D接收請(qǐng)求并決定調(diào)用哪個(gè)模型構(gòu)件去處理請(qǐng)求，然后再確定用哪個(gè)視圖來(lái)顯示模型處理返回的數(shù)據(jù)。這三層是緊密聯(lián)系在一起的，但又是互相獨(dú)立的，每一層內(nèi)部的變化不影響其他層。每一層都對(duì)外提供接口(Interface)，供上面一層調(diào)用。至于這一階段發(fā)生什么?簡(jiǎn)而言之，首先瀏覽器發(fā)送過(guò)來(lái)的請(qǐng)求先經(jīng)過(guò)控制器，控制器進(jìn)行邏輯處理和請(qǐng)求分發(fā)，接著會(huì)調(diào)用模型，這一階段模型會(huì)獲取 redis db 以及 MySQL 的數(shù)據(jù)，獲取數(shù)據(jù)后將渲染好的頁(yè)面，響應(yīng)信息會(huì)以響應(yīng)報(bào)文的形式返回給客戶端，最后瀏覽器通過(guò)渲染引擎將網(wǎng)頁(yè)呈現(xiàn)在用戶面前。

3.http 響應(yīng)報(bào)文

響應(yīng)報(bào)文由響應(yīng)行(request line)、響應(yīng)頭部(header)、響應(yīng)主體三個(gè)部分組成。如下圖所示：

(1) 響應(yīng)行包含：協(xié)議版本，狀態(tài)碼，狀態(tài)碼描述

狀態(tài)碼規(guī)則如下：1xx：指示信息--表示請(qǐng)求已接收，繼續(xù)處理。2xx：成功--表示請(qǐng)求已被成功接收、理解、接受。3xx：重定向--要完成請(qǐng)求必須進(jìn)行更進(jìn)一步的操作。4xx：客戶端錯(cuò)誤--請(qǐng)求有語(yǔ)法錯(cuò)誤或請(qǐng)求無(wú)法實(shí)現(xiàn)。5xx：服務(wù)器端錯(cuò)誤--服務(wù)器未能實(shí)現(xiàn)合法的請(qǐng)求。

(2) 響應(yīng)頭部包含響應(yīng)報(bào)文的附加信息，由 名/值 對(duì)組成

(3) 響應(yīng)主體包含回車符、換行符和響應(yīng)返回?cái)?shù)據(jù)，并不是所有響應(yīng)報(bào)文都有響應(yīng)數(shù)據(jù)

六、瀏覽器解析渲染頁(yè)面

瀏覽器拿到響應(yīng)文本 HTML 后，接下來(lái)介紹下瀏覽器渲染機(jī)制

瀏覽器解析渲染頁(yè)面分為一下五個(gè)步驟：

• 根據(jù) HTML 解析出 DOM 樹(shù)
• 根據(jù) CSS 解析生成 CSS 規(guī)則樹(shù)
• 結(jié)合 DOM 樹(shù)和 CSS 規(guī)則樹(shù)，生成渲染樹(shù)
• 根據(jù)渲染樹(shù)計(jì)算每一個(gè)節(jié)點(diǎn)的信息
• 根據(jù)計(jì)算好的信息繪制頁(yè)面

1.根據(jù) HTML 解析 DOM 樹(shù)

• 根據(jù) HTML 的內(nèi)容，將標(biāo)簽按照結(jié)構(gòu)解析成為 DOM 樹(shù)，DOM 樹(shù)解析的過(guò)程是一個(gè)深度優(yōu)先遍歷。即先構(gòu)建當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)，再構(gòu)建下一個(gè)兄弟節(jié)點(diǎn)。
• 在讀取 HTML 文檔，構(gòu)建 DOM 樹(shù)的過(guò)程中，若遇到 script 標(biāo)簽，則 DOM 樹(shù)的構(gòu)建會(huì)暫停，直至腳本執(zhí)行完畢。

2.根據(jù) CSS 解析生成 CSS 規(guī)則樹(shù)

• 解析 CSS 規(guī)則樹(shù)時(shí) js 執(zhí)行將暫停，直至 CSS 規(guī)則樹(shù)就緒。
• 瀏覽器在 CSS 規(guī)則樹(shù)生成之前不會(huì)進(jìn)行渲染。

3.結(jié)合 DOM 樹(shù)和 CSS 規(guī)則樹(shù)，生成渲染樹(shù)

• DOM 樹(shù)和 CSS 規(guī)則樹(shù)全部準(zhǔn)備好了以后，瀏覽器才會(huì)開(kāi)始構(gòu)建渲染樹(shù)。
• 精簡(jiǎn) CSS 并可以加快 CSS 規(guī)則樹(shù)的構(gòu)建，從而加快頁(yè)面相應(yīng)速度。

4.根據(jù)渲染樹(shù)計(jì)算每一個(gè)節(jié)點(diǎn)的信息(布局)

• 布局：通過(guò)渲染樹(shù)中渲染對(duì)象的信息，計(jì)算出每一個(gè)渲染對(duì)象的位置和尺寸
• 回流：在布局完成后，發(fā)現(xiàn)了某個(gè)部分發(fā)生了變化影響了布局，那就需要倒回去重新渲染。

5.根據(jù)計(jì)算好的信息繪制頁(yè)面

繪制階段，系統(tǒng)會(huì)遍歷呈現(xiàn)樹(shù)，并調(diào)用呈現(xiàn)器的“paint”方法，將呈現(xiàn)器的內(nèi)容顯示在屏幕上。

重繪：某個(gè)元素的背景顏色，文字顏色等，不影響元素周圍或內(nèi)部布局的屬性，將只會(huì)引起瀏覽器的重繪。

回流：某個(gè)元素的尺寸發(fā)生了變化，則需重新計(jì)算渲染樹(shù)，重新渲染。

七、斷開(kāi)連接

當(dāng)數(shù)據(jù)傳送完畢，需要斷開(kāi) tcp 連接，此時(shí)發(fā)起 tcp 四次揮手。

• 發(fā)起方向被動(dòng)方發(fā)送報(bào)文，F(xiàn)in、Ack、Seq，表示已經(jīng)沒(méi)有數(shù)據(jù)傳輸了。并進(jìn)入 FINWAIT1 狀態(tài)。(第一次揮手：由瀏覽器發(fā)起的，發(fā)送給服務(wù)器，我請(qǐng)求報(bào)文發(fā)送完了，你準(zhǔn)備關(guān)閉吧)
• 被動(dòng)方發(fā)送報(bào)文，Ack、Seq，表示同意關(guān)閉請(qǐng)求。此時(shí)主機(jī)發(fā)起方進(jìn)入 FINWAIT2 狀態(tài)。(第二次揮手：由服務(wù)器發(fā)起的，告訴瀏覽器，我請(qǐng)求報(bào)文接受完了，我準(zhǔn)備關(guān)閉了，你也準(zhǔn)備吧)
• 被動(dòng)方向發(fā)起方發(fā)送報(bào)文段，F(xiàn)in、Ack、Seq，請(qǐng)求關(guān)閉連接。并進(jìn)入 LAST_ACK 狀態(tài)。(第三次揮手：由服務(wù)器發(fā)起，告訴瀏覽器，我響應(yīng)報(bào)文發(fā)送完了，你準(zhǔn)備關(guān)閉吧)
• 發(fā)起方向被動(dòng)方發(fā)送報(bào)文段，Ack、Seq。然后進(jìn)入等待 TIME_WAIT 狀態(tài)。被動(dòng)方收到發(fā)起方的報(bào)文段以后關(guān)閉連接。發(fā)起方等待一定時(shí)間未收到回復(fù)，則正常關(guān)閉。(第四次揮手：由瀏覽器發(fā)起，告訴服務(wù)器，我響應(yīng)報(bào)文接受完了，我準(zhǔn)備關(guān)閉了，你也準(zhǔn)備吧)