查缺補漏:一文看懂HTTP請求流程,不信你還不會

2019-12-17     老男孩的成長之路

預備知識

前文沒有描述到傳輸和協議直接的層級對應關係,大概補充下網絡通信中數據傳輸對應的協議,首先了解下OSI(開放式系統互聯:Open System InterConnection)七層 模式,及其對應不同層次的協議。

OSI體系結構TCP/IP相關協議結構應用層HTTP,Telnet,FTP等表示層會話層傳輸層TCP,UDP網絡層IP數據鏈路層物理層

了解到HTTP協議是建立在TCP連接基礎之上的。HTTP 是一種允許瀏覽器向伺服器獲取資源的協議,是 Web 的基礎,通常由瀏覽器發起請求,用來獲取不同類型的文件, 例如 HTML 文件、CSS 文件、JavaScript 文件、圖片、視頻等。此外,HTTP 也是瀏覽器使用最廣的協議。

我們對HTTP不太了解的話都會存在這樣的疑惑,為什麼再次訪問同一站點會比第一次快,登錄過一次後的網站再次訪問就處於登錄狀態等,我們 通過對HTTP請求過程的剖析來解開這些謎團。

瀏覽器端發起 HTTP 請求流程

瀏覽器輸入網址:http://time.geekbang.org/index.html,之後會完成什麼步驟呢?

1、構建請求

首先,瀏覽器構建請求行信息,構建好後,瀏覽器準備發起網絡請求。

GET /index.html HTTP1.1

2、查找緩存

在真正發起網絡請求之前,瀏覽器會先在瀏覽器緩存中查詢是否有要請求的文件。其中,瀏覽器緩存是一種在本地保存資源副本,以供下次請求時直接使用的技術

當瀏覽器發現請求資源已經存在瀏覽器緩存中存有副本,則會攔截請求並返回該資源副本結束請求。如果查找緩存失敗,則會進入網絡請求。所以會有利於:

  • 緩解伺服器端壓力,提升性能
  • 對於網站來說,緩存是實現快速資源加載的重要組成部分,減少了獲取資源的時間。

3、準備IP位址和埠

我們通過開頭預備知識和前文也大概了解到了HTTP和TCP的關係。瀏覽器使用 HTTP 協議作為應用層協議,用來封裝請求的文本信息;並使用 TCP/IP 作傳輸層協議將它發到網絡上,所以在 HTTP 工作開始之前,瀏覽器需要通過 TCP 與伺服器建立連接。也就是說 HTTP 的內容是通過 TCP 的傳輸數據階段來實現的。

TCP和HTTP的關係示意圖:

據此,我們可以知道建立HTTP網絡請求就是,通過URL地址來解析獲取IP和埠信息,建立伺服器和TCP連接。我們通過前文《TCP協議》 說到了數據包都是通過IP位址傳輸給接收方的。而我們網站一般的地址都是域名,所以需要把域名和IP位址做映射關係,即解析IP位址的系統「域名系統(DNS)」解析出 IP位址,並獲取對應埠號獲得建立連接的前置條件。換句話說,即瀏覽器請求DNS返回域名對應的IP,而請求DNS時也會查詢DNS數據緩存服務,判斷是否域名已解析過, 如果解析過則查詢直接使用,拿到IP後則判斷URL是否指明埠號,沒有則HTTP協議默認時80埠。

4、等待TCP隊列

Chrome 有個機制,同一個域名同時最多只能建立 6 個 TCP 連接,如果在同一個域名下同時有 10 個請求發生,那麼其中 4 個請求會進入排隊等待狀態,直至進行中的請求完成。當然,如果當前請求數量少於 6,會直接進入下一步,建立 TCP 連接。

5、建立TCP連接

隊列等待結束後,TCP和伺服器實現「三次握手」(前文TCP協議有描述),即客戶端和伺服器發送三個數據包以確認連接,實現瀏覽器和服務的連接。

6、發送HTTP請求

一旦建立了 TCP 連接,瀏覽器就可以和伺服器進行通信了。而 HTTP 中的數據正是在這個通信過程中傳輸的。

HTTP請求數據格式:

首先瀏覽器會向伺服器發送請求行,它包括了請求方法、請求 URI(Uniform Resource Identifier)和 HTTP 版本協議

其中請求方式有GET,POST,PUT,Delete等,其中常用的POST會用於發送一些數據給伺服器,比如登錄網站把用戶信息發送給伺服器,一般 這些數據會通過請求體發送。

在瀏覽器發送請求行命令之後,還要以請求頭形式發送其他一些信息,把瀏覽器的一些基礎信息告訴伺服器。比如包含了瀏覽器所使用的作業系統、瀏覽器內核等信息,以及當前請求的域名信息、Cookie等。

伺服器端處理 HTTP 請求流程

1、返回請求

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

通過curl工具(或network面板)我們可以了解到伺服器返回的數據格式:

首先伺服器會返回響應行,包括協議版本和狀態碼。

如果出現錯誤,伺服器會通過請求行的狀態碼來返回對應的處理結果,例如:

  • 最常用的狀態碼是 200,表示處理成功;
  • 404,表示沒有找到頁面
  • 500,表示伺服器錯誤

正如瀏覽器會隨同請求發送請求頭一樣,伺服器也會隨同響應向瀏覽器發送響應頭。響應頭包含了伺服器自身的一些信息, 比如伺服器生成返回數據的時間、返回的數據類型(JSON、HTML、流媒體等類型),以及伺服器要在客戶端保存的 Cookie 等信息。

響應頭之後,伺服器會發送響應體數據,通常包含了HTML的實際內容。以上為伺服器響應瀏覽器的過程。

2、斷開連接

一旦伺服器向客戶端返回了請求數據,它就要關閉 TCP 連接。不過如果瀏覽器或者伺服器在其頭信息中加入了:

Connection:Keep-Alive

則TCP 連接在發送後將仍然保持打開狀態,這樣瀏覽器就可以繼續通過同一個 TCP 連接發送請求。保持 TCP 連接可以省去下次請求時需要建立連接的時間,提升資源加載速度。 如果一個頁面內嵌的圖片都來自同一web站點,則初始化一個持久連接則可復用減少TCP的連接。

3、重定向

重定向返迴響應行和響應頭:

狀態 301 就是告訴瀏覽器,我需要重定向到另外一個網址,而需要重定向的網址正是包含在響應頭的 Location 欄位中,接下來,瀏覽器獲取 Location 欄位中的地址,並使用該地址重新導航,這就是一個完整重定向的執行流程。

總結

通過http請求的完整過程,我們就知道,請求過程中DNS緩緩和頁面資源緩存會被瀏覽器緩存起來,以減少向伺服器請求的資源,所以會再次請求站點時速度會快。

瀏覽器資源緩存處理過程:

從上圖的第一次請求可以看出,當伺服器返回 HTTP 響應頭給瀏覽器時,瀏覽器是通過響應頭中的 Cache-Control 欄位來設置是否緩存該資源。通常,我們還需要為這個資源設置一個緩存過期時長,而這個時長是通過 Cache-Control 中的 Max-age 參數來設置的。

因此在該緩存資源還未過期的情況下, 如果再次請求該資源,會直接返回緩存中的資源給瀏覽器。

如果緩存過期了,瀏覽器則會繼續發起網絡請求,並且在 HTTP 請求頭中帶上If-None-Match,伺服器收到請求頭後,會根據 If-None-Match 的值來判斷請求的資源是否有更新。

  • 如果沒有更新,就返回 304 狀態碼,相當於伺服器告訴瀏覽器,這個緩存可以繼續使用。
  • 如果資源有更新,伺服器就直接返回最新資源給瀏覽器。

登錄網站,通過POST方式提交信息給伺服器,伺服器接收到瀏覽器提交的信息之後,查詢驗證信息正確則會生成表面用戶身份的字符串寫入響應頭的Set-Cookie欄位里返回瀏覽器。

瀏覽器解析響應頭,如有Set-Cookie欄位則保存在本地,當用戶再次訪問時,發起HTTP請求前瀏覽器會讀取Cookie數據並寫入請求頭髮送到伺服器,伺服器再次判斷信息,如果 正確則展示用戶登錄狀態及用戶信息。

最後總結出瀏覽器中的HTTP請求從發起到結束一共經歷了八個階段:構建請求、查找緩存、準備 IP 和埠、等待 TCP 隊列、建立 TCP 連接、發起 HTTP 請求、伺服器處理請求、伺服器返回請求和斷開連接

詳細HTTP請求流程:

文章來源: https://twgreatdaily.com/zh/UbNDG28BMH2_cNUgLLea.html