預(yù)備知識(shí)

OSI體系結(jié)構(gòu)TCP/IP相關(guān)協(xié)議結(jié)構(gòu)應(yīng)用層HTTP,Telnet，F(xiàn)TP等表示層會(huì)話層傳輸層TCP,UDP網(wǎng)絡(luò)層IP數(shù)據(jù)鏈路層物理層

了解到HTTP協(xié)議是建立在TCP連接基礎(chǔ)之上的。HTTP 是一種允許瀏覽器向服務(wù)器獲取資源的協(xié)議，是 Web 的基礎(chǔ)，通常由瀏覽器發(fā)起請(qǐng)求，用來(lái)獲取不同類型的文件， 例如 HTML 文件、CSS 文件、JavaScript 文件、圖片、視頻等。此外，HTTP 也是瀏覽器使用最廣的協(xié)議。

我們對(duì)HTTP不太了解的話都會(huì)存在這樣的疑惑，為什么再次訪問(wèn)同一站點(diǎn)會(huì)比第一次快，登錄過(guò)一次后的網(wǎng)站再次訪問(wèn)就處于登錄狀態(tài)等，我們 通過(guò)對(duì)HTTP請(qǐng)求過(guò)程的剖析來(lái)解開(kāi)這些謎團(tuán)。

瀏覽器端發(fā)起 HTTP 請(qǐng)求流程

瀏覽器輸入網(wǎng)址：http://time.geekbang.org/index.html，之后會(huì)完成什么步驟呢?

1、構(gòu)建請(qǐng)求

首先，瀏覽器構(gòu)建請(qǐng)求行信息，構(gòu)建好后，瀏覽器準(zhǔn)備發(fā)起網(wǎng)絡(luò)請(qǐng)求。

GET /index.html HTTP1.1 

2、查找緩存

在真正發(fā)起網(wǎng)絡(luò)請(qǐng)求之前，瀏覽器會(huì)先在瀏覽器緩存中查詢是否有要請(qǐng)求的文件。其中，瀏覽器緩存是一種在本地保存資源副本，以供下次請(qǐng)求時(shí)直接使用的技術(shù)。

當(dāng)瀏覽器發(fā)現(xiàn)請(qǐng)求資源已經(jīng)存在瀏覽器緩存中存有副本，則會(huì)攔截請(qǐng)求并返回該資源副本結(jié)束請(qǐng)求。如果查找緩存失敗，則會(huì)進(jìn)入網(wǎng)絡(luò)請(qǐng)求。所以會(huì)有利于：

• 緩解服務(wù)器端壓力，提升性能
• 對(duì)于網(wǎng)站來(lái)說(shuō)，緩存是實(shí)現(xiàn)快速資源加載的重要組成部分，減少了獲取資源的時(shí)間。

3、準(zhǔn)備IP地址和端口

我們通過(guò)開(kāi)頭預(yù)備知識(shí)和前文也大概了解到了HTTP和TCP的關(guān)系。瀏覽器使用 HTTP 協(xié)議作為應(yīng)用層協(xié)議，用來(lái)封裝請(qǐng)求的文本信息;并使用 TCP/IP 作傳輸層協(xié)議將它發(fā)到網(wǎng)絡(luò)上，所以在 HTTP 工作開(kāi)始之前，瀏覽器需要通過(guò) TCP 與服務(wù)器建立連接。也就是說(shuō) HTTP 的內(nèi)容是通過(guò) TCP 的傳輸數(shù)據(jù)階段來(lái)實(shí)現(xiàn)的。

TCP和HTTP的關(guān)系示意圖：

據(jù)此，我們可以知道建立HTTP網(wǎng)絡(luò)請(qǐng)求就是，通過(guò)URL地址來(lái)解析獲取IP和端口信息，建立服務(wù)器和TCP連接。我們通過(guò)前文《TCP協(xié)議》 說(shuō)到了數(shù)據(jù)包都是通過(guò)IP地址傳輸給接收方的。而我們網(wǎng)站一般的地址都是域名，所以需要把域名和IP地址做映射關(guān)系，即解析IP地址的系統(tǒng)“域名系統(tǒng)(DNS)”解析出 IP地址，并獲取對(duì)應(yīng)端口號(hào)獲得建立連接的前置條件。換句話說(shuō)，即瀏覽器請(qǐng)求DNS返回域名對(duì)應(yīng)的IP，而請(qǐng)求DNS時(shí)也會(huì)查詢DNS數(shù)據(jù)緩存服務(wù)，判斷是否域名已解析過(guò)， 如果解析過(guò)則查詢直接使用，拿到IP后則判斷URL是否指明端口號(hào)，沒(méi)有則HTTP協(xié)議默認(rèn)時(shí)80端口。

4、等待TCP隊(duì)列

Chrome 有個(gè)機(jī)制，同一個(gè)域名同時(shí)最多只能建立 6 個(gè) TCP 連接，如果在同一個(gè)域名下同時(shí)有 10 個(gè)請(qǐng)求發(fā)生，那么其中 4 個(gè)請(qǐng)求會(huì)進(jìn)入排隊(duì)等待狀態(tài)，直至進(jìn)行中的請(qǐng)求完成。當(dāng)然，如果當(dāng)前請(qǐng)求數(shù)量少于 6，會(huì)直接進(jìn)入下一步，建立 TCP 連接。

5、建立TCP連接

隊(duì)列等待結(jié)束后，TCP和服務(wù)器實(shí)現(xiàn)“三次握手”(前文TCP協(xié)議有描述)，即客戶端和服務(wù)器發(fā)送三個(gè)數(shù)據(jù)包以確認(rèn)連接，實(shí)現(xiàn)瀏覽器和服務(wù)的連接。

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

一旦建立了 TCP 連接，瀏覽器就可以和服務(wù)器進(jìn)行通信了。而 HTTP 中的數(shù)據(jù)正是在這個(gè)通信過(guò)程中傳輸?shù)摹?/p>

HTTP請(qǐng)求數(shù)據(jù)格式：

首先瀏覽器會(huì)向服務(wù)器發(fā)送請(qǐng)求行，它包括了請(qǐng)求方法、請(qǐng)求 URI(Uniform Resource Identifier)和 HTTP 版本協(xié)議。

其中請(qǐng)求方式有GET，POST,PUT,Delete等，其中常用的POST會(huì)用于發(fā)送一些數(shù)據(jù)給服務(wù)器，比如登錄網(wǎng)站把用戶信息發(fā)送給服務(wù)器，一般 這些數(shù)據(jù)會(huì)通過(guò)請(qǐng)求體發(fā)送。

在瀏覽器發(fā)送請(qǐng)求行命令之后，還要以請(qǐng)求頭形式發(fā)送其他一些信息，把瀏覽器的一些基礎(chǔ)信息告訴服務(wù)器。比如包含了瀏覽器所使用的操作系統(tǒng)、瀏覽器內(nèi)核等信息，以及當(dāng)前請(qǐng)求的域名信息、Cookie等。

服務(wù)器端處理 HTTP 請(qǐng)求流程

1、返回請(qǐng)求

curl -i https://time.geekbang.org/ 

通過(guò)curl工具(或network面板)我們可以了解到服務(wù)器返回的數(shù)據(jù)格式：

首先服務(wù)器會(huì)返回響應(yīng)行，包括協(xié)議版本和狀態(tài)碼。

如果出現(xiàn)錯(cuò)誤，服務(wù)器會(huì)通過(guò)請(qǐng)求行的狀態(tài)碼來(lái)返回對(duì)應(yīng)的處理結(jié)果，例如：

• 最常用的狀態(tài)碼是 200，表示處理成功;
• 404，表示沒(méi)有找到頁(yè)面
• 500，表示服務(wù)器錯(cuò)誤

正如瀏覽器會(huì)隨同請(qǐng)求發(fā)送請(qǐng)求頭一樣，服務(wù)器也會(huì)隨同響應(yīng)向?yàn)g覽器發(fā)送響應(yīng)頭。響應(yīng)頭包含了服務(wù)器自身的一些信息， 比如服務(wù)器生成返回?cái)?shù)據(jù)的時(shí)間、返回的數(shù)據(jù)類型(JSON、HTML、流媒體等類型)，以及服務(wù)器要在客戶端保存的 Cookie 等信息。

響應(yīng)頭之后，服務(wù)器會(huì)發(fā)送響應(yīng)體數(shù)據(jù)，通常包含了HTML的實(shí)際內(nèi)容。以上為服務(wù)器響應(yīng)瀏覽器的過(guò)程。

2、斷開(kāi)連接

一旦服務(wù)器向客戶端返回了請(qǐng)求數(shù)據(jù)，它就要關(guān)閉 TCP 連接。不過(guò)如果瀏覽器或者服務(wù)器在其頭信息中加入了：

Connection:Keep-Alive 

則TCP 連接在發(fā)送后將仍然保持打開(kāi)狀態(tài)，這樣瀏覽器就可以繼續(xù)通過(guò)同一個(gè) TCP 連接發(fā)送請(qǐng)求。保持 TCP 連接可以省去下次請(qǐng)求時(shí)需要建立連接的時(shí)間，提升資源加載速度。 如果一個(gè)頁(yè)面內(nèi)嵌的圖片都來(lái)自同一web站點(diǎn)，則初始化一個(gè)持久連接則可復(fù)用減少TCP的連接。

3、重定向

重定向返回響應(yīng)行和響應(yīng)頭:

狀態(tài) 301 就是告訴瀏覽器，我需要重定向到另外一個(gè)網(wǎng)址，而需要重定向的網(wǎng)址正是包含在響應(yīng)頭的 Location 字段中，接下來(lái)，瀏覽器獲取 Location 字段中的地址，并使用該地址重新導(dǎo)航，這就是一個(gè)完整重定向的執(zhí)行流程。

總結(jié)

通過(guò)http請(qǐng)求的完整過(guò)程，我們就知道，請(qǐng)求過(guò)程中DNS緩緩和頁(yè)面資源緩存會(huì)被瀏覽器緩存起來(lái)，以減少向服務(wù)器請(qǐng)求的資源，所以會(huì)再次請(qǐng)求站點(diǎn)時(shí)速度會(huì)快。

瀏覽器資源緩存處理過(guò)程：

從上圖的第一次請(qǐng)求可以看出，當(dāng)服務(wù)器返回 HTTP 響應(yīng)頭給瀏覽器時(shí)，瀏覽器是通過(guò)響應(yīng)頭中的 Cache-Control 字段來(lái)設(shè)置是否緩存該資源。通常，我們還需要為這個(gè)資源設(shè)置一個(gè)緩存過(guò)期時(shí)長(zhǎng)，而這個(gè)時(shí)長(zhǎng)是通過(guò) Cache-Control 中的 Max-age 參數(shù)來(lái)設(shè)置的。

因此在該緩存資源還未過(guò)期的情況下, 如果再次請(qǐng)求該資源，會(huì)直接返回緩存中的資源給瀏覽器。

如果緩存過(guò)期了，瀏覽器則會(huì)繼續(xù)發(fā)起網(wǎng)絡(luò)請(qǐng)求，并且在 HTTP 請(qǐng)求頭中帶上If-None-Match，服務(wù)器收到請(qǐng)求頭后，會(huì)根據(jù) If-None-Match 的值來(lái)判斷請(qǐng)求的資源是否有更新。

• 如果沒(méi)有更新，就返回 304 狀態(tài)碼，相當(dāng)于服務(wù)器告訴瀏覽器，這個(gè)緩存可以繼續(xù)使用。
• 如果資源有更新，服務(wù)器就直接返回最新資源給瀏覽器。

登錄網(wǎng)站，通過(guò)POST方式提交信息給服務(wù)器，服務(wù)器接收到瀏覽器提交的信息之后，查詢驗(yàn)證信息正確則會(huì)生成表面用戶身份的字符串寫入響應(yīng)頭的Set-Cookie字段里返回瀏覽器。

瀏覽器解析響應(yīng)頭，如有Set-Cookie字段則保存在本地，當(dāng)用戶再次訪問(wèn)時(shí)，發(fā)起HTTP請(qǐng)求前瀏覽器會(huì)讀取Cookie數(shù)據(jù)并寫入請(qǐng)求頭發(fā)送到服務(wù)器，服務(wù)器再次判斷信息，如果 正確則展示用戶登錄狀態(tài)及用戶信息。

最后總結(jié)出瀏覽器中的HTTP請(qǐng)求從發(fā)起到結(jié)束一共經(jīng)歷了八個(gè)階段：構(gòu)建請(qǐng)求、查找緩存、準(zhǔn)備 IP 和端口、等待 TCP 隊(duì)列、建立 TCP 連接、發(fā)起 HTTP 請(qǐng)求、服務(wù)器處理請(qǐng)求、服務(wù)器返回請(qǐng)求和斷開(kāi)連接。

詳細(xì)HTTP請(qǐng)求流程：