一次完整的HTTP請求過程

一次完整的HTTP請求過程

當咱們在web瀏覽器的地址欄中輸入： www.baidu.com，而後回車，到底發生了什麼

過程概覽

　　1.對www.baidu.com這個網址進行DNS域名解析，獲得對應的IP地址

　　2.根據這個IP，找到對應的服務器，發起TCP的三次握手

　　3.創建TCP鏈接後發起HTTP請求

　　4.服務器響應HTTP請求，瀏覽器獲得html代碼

　　5.瀏覽器解析html代碼，並請求html代碼中的資源（如js、css圖片等）（先獲得html代碼，才能去找這些資源）

　　6.瀏覽器對頁面進行渲染呈現給用戶

注：1.DNS域名解析採用的是遞歸查詢的方式，過程是，先去找DNS緩存->緩存找不到就去找根域名服務器->根域名又會去找下一級，這樣遞歸查找以後，找到了，給咱們的web瀏覽器

2.爲何HTTP協議要基於TCP來實現？  TCP是一個端到端的可靠的面相鏈接的協議，HTTP基於傳輸層TCP協議不用擔憂數據傳輸的各類問題（當發生錯誤時，會重傳）

3.最後一步瀏覽器是如何對頁面進行渲染的？  a）解析html文件構成 DOM樹，b）解析CSS文件構成渲染樹，  c）邊解析，邊渲染 ，  d）JS 單線程運行，JS有可能修改DOM結構，意味着JS執行完成前，後續全部資源的下載是沒有必要的，因此JS是單線程，會阻塞後續資源下載

 

下面咱們來詳細看看這幾個過程的具體細節：

　　1.域名解析

　　a）首先會搜索瀏覽器自身的DNS緩存（緩存時間比較短，大概只有1分鐘，且只能容納1000條緩存）

　　b）若是瀏覽器自身的緩存裏面沒有找到，那麼瀏覽器會搜索系統自身的DNS緩存

　　c）若是尚未找到，那麼嘗試從 hosts文件裏面去找

　　d）在前面三個過程都沒獲取到的狀況下，就遞歸地去域名服務器去查找，具體過程以下

 

DNS優化：兩個方面：DNS緩存、DNS負載均衡

 

　　2.TCP鏈接（三次握手）

　　拿到域名對應的IP地址以後，User-Agent（通常指瀏覽器）會以一個隨機端口（1024<端口<65535）向服務器的WEB程序（經常使用的有httpd，nginx）等的80端口。這個鏈接請求（原始的http請求通過TCP/IP4層模型的層層封包）到達服務器端後（這中間有各類路由設備，局域網內除外），進入到網卡，而後是進入到內核的TCP/IP協議棧（用於識別鏈接請求，解封包，一層一層的剝開），還有可能要通過Netfilter防火牆（屬於內核的模塊）的過濾，最終達到WEB程序，最終創建了TCP/IP的鏈接

圖解：

 

 

具體能夠翻閱前面關於 TCP三次握手和四次揮手的博客

 

　　3.創建TCP鏈接以後，發起HTTP請求

　　HTTP請求報文由三部分組成：請求行，請求頭和請求正文

　　請求行：用於描述客戶端的請求方式，請求的資源名稱以及使用的HTTP協議的版本號（例：GET/books/java.html HTTP/1.1）

　　請求頭：用於描述客戶端請求哪臺主機，以及客戶端的一些環境信息等

　　注：這裏提一個請求頭 Connection，Connection設置爲 keep-alive用於說明 客戶端這邊設置的是，本次HTTP請求以後並不須要關閉TCP鏈接，這樣可使下次HTTP請求使用相同的TCP通道，節省TCP創建鏈接的時間

　　請求正文：當使用POST, PUT等方法時，一般須要客戶端向服務器傳遞數據。這些數據就儲存在請求正文中（GET方式是保存在url地址後面，不會放到這裏）

 

　　4.服務器端響應http請求，瀏覽器獲得html代碼

　　HTTP響應也由三部分組成：狀態碼，響應頭和實體內容

　　狀態碼：狀態碼用於表示服務器對請求的處理結果

　　列舉幾種常見的：200（沒有問題） 302（要你去找別人） 304（要你去拿緩存） 307（要你去拿緩存） 403（有這個資源，可是沒有訪問權限） 404（服務器沒有這個資源） 500（服務器這邊有問題）

　　若干響應頭：響應頭用於描述服務器的基本信息，以及客戶端如何處理數據

　　實體內容：服務器返回給客戶端的數據

　　注：html資源文件應該不是經過 HTTP響應直接返回去的，應該是經過nginx經過io操做去拿到的吧

 

　　5.瀏覽器解析html代碼，並請求html代碼中的資源

　　瀏覽器拿到html文件後，就開始解析其中的html代碼，遇到js/css/image等靜態資源時，就向服務器端去請求下載（會使用多線程下載，每一個瀏覽器的線程數不同），這是時候就用上 keep-alive特性了，創建一次HTTP鏈接，能夠請求多個資源，下載資源的順序就是按照代碼裏面的順序，可是因爲每一個資源大小不同，而瀏覽器又是多線程請求請求資源，因此這裏顯示的順序並不必定是代碼裏面的順序。

 

　　6.瀏覽器對頁面進行渲染呈現給用戶

　　最後，瀏覽器利用本身內部的工做機制，把請求的靜態資源和html代碼進行渲染，渲染以後呈現給用戶

 　　瀏覽器是一個邊解析邊渲染的過程。首先瀏覽器解析HTML文件構建DOM樹，而後解析CSS文件構建渲染樹，等到渲染樹構建完成後，瀏覽器開始佈局渲染樹並將其繪製到屏幕上。這個過程比較複雜，涉及到兩個概念: reflow(迴流)和repain(重繪)。DOM節點中的各個元素都是以盒模型的形式存在，這些都須要瀏覽器去計算其位置和大小等，這個過程稱爲relow;當盒模型的位置,大小以及其餘屬性，如顏色,字體,等肯定下來以後，瀏覽器便開始繪製內容，這個過程稱爲repain。頁面在首次加載時必然會經歷reflow和repain。reflow和repain過程是很是消耗性能的，尤爲是在移動設備上，它會破壞用戶體驗，有時會形成頁面卡頓。因此咱們應該儘量少的減小reflow和repain。

　　JS的解析是由瀏覽器中的JS解析引擎完成的。JS是單線程運行，JS有可能修改DOM結構，意味着JS執行完成前，後續全部資源的下載是沒有必要的，因此JS是單線程，會阻塞後續資源下載

 

　　自此一次完整的HTTP事務宣告完成.

 

總結：

　　域名解析 --> 發起TCP的3次握手 --> 創建TCP鏈接後發起http請求 --> 服務器響應http請求，瀏覽器獲得html代碼 --> 瀏覽器解析html代碼，並請求html代碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進行渲染呈現給用戶