資訊專欄INFORMATION COLUMN
摘要：本文摘要域名解析建立連接發送請求服務器處理請求返回響應結果關閉連接瀏覽器解析瀏覽器布局渲染總結當我們在瀏覽器輸入網址并回車后，一切從這里開始。
本文摘要：
1.DNS域名解析；
2.建立TCP連接；
3.發送HTTP請求；
4.服務器處理請求；
5.返回響應結果；
6.關閉TCP連接；
7.瀏覽器解析HTML；
8.瀏覽器布局渲染；
總結
當我們在瀏覽器輸入網址并回車后，一切從這里開始。
一、DNS域名解析
我們在瀏覽器輸入網址，其實就是要向服務器請求我們想要的頁面內容，所有瀏覽器首先要確認的是域名所對應的服務器在哪里。將域名解析成對應的服務器IP地址這項工作，是由DNS服務器來完成的。
客戶端收到你輸入的域名地址后，它首先去找本地的hosts文件，檢查在該文件中是否有相應的域名、IP對應關系，如果有，則向其IP地址發送請求，如果沒有，再去找DNS服務器。一般用戶很少去編輯修改hosts文件。
瀏覽器客戶端向本地DNS服務器發送一個含有域名www.cnblogs.com的DNS查詢報文。本地DNS服務器把查詢報文轉發到根DNS服務器，根DNS服務器注意到其com后綴，于是向本地DNS服務器返回comDNS服務器的IP地址。本地DNS服務器再次向comDNS服務器發送查詢請求，comDNS服務器注意到其www.cnblogs.com后綴并用負責該域名的權威DNS服務器的IP地址作為回應。最后，本地DNS服務器將含有www.cnblogs.com的IP地址的響應報文發送給客戶端。
從客戶端到本地服務器屬于遞歸查詢，而DNS服務器之間的交互屬于迭代查詢。
正常情況下，本地DNS服務器的緩存中已有comDNS服務器的地址，因此請求根域名服務器這一步不是必需的。
二、建立TCP鏈接
費了一頓周折終于拿到服務器IP了，下一步自然就是鏈接到該服務器。對于客戶端與服務器的TCP鏈接，必然要說的就是『三次握手』。
三次握手
客戶端發送一個帶有SYN標志的數據包給服務端，服務端收到后，回傳一個帶有SYN/ACK標志的數據包以示傳達確認信息，最后客戶端再回傳一個帶ACK標志的數據包，代表握手結束，連接成功。
上圖也可以這么理解：
客戶端：“你好，在家不，有你快遞。”
服務端：“在的，送來就行。”
客戶端：“好嘞。”
三、發送HTTP請求
與服務器建立了連接后，就可以向服務器發起請求了。這里我們先看下請求報文的結構（如下圖）：
請求報文
在瀏覽器中查看報文首部（以google瀏覽器為例）：
請求行包括請求方法、URI、HTTP版本。首部字段傳遞重要信息，包括請求首部字段、通用首部字段和實體首部字段。我們可以從報文中看到發出的請求的具體信息。具體每個首部字段的作用，這里不做過多闡述。
四、服務器處理請求
服務器端收到請求后的由web服務器（準確說應該是http服務器）處理請求，諸如Apache、Ngnix、IIS等。web服務器解析用戶請求，知道了需要調度哪些資源文件，再通過相應的這些資源文件處理用戶請求和參數，并調用數據庫信息，最后將結果通過web服務器返回給瀏覽器客戶端。
服務器處理請求
五、返回響應結果
在HTTP里，有請求就會有響應，哪怕是錯誤信息。這里我們同樣看下響應報文的組成結構：
響應報文
在響應結果中都會有個一個HTTP狀態碼，比如我們熟知的200、301、404、500等。通過這個狀態碼我們可以知道服務器端的處理是否正常，并能了解具體的錯誤。
狀態碼由3位數字和原因短語組成。根據首位數字，狀態碼可以分為五類：
狀態碼類別
六、關閉TCP連接
為了避免服務器與客戶端雙方的資源占用和損耗，當雙方沒有請求或響應傳遞時，任意一方都可以發起關閉請求。與創建TCP連接的3次握手類似，關閉TCP連接，需要4次握手。
4次握手
上圖可以這么理解：
客戶端：“兄弟，我這邊沒數據要傳了，咱關閉連接吧。”
服務端：“收到，我看看我這邊有木有數據了。”
服務端：“兄弟，我這邊也沒數據要傳你了，咱可以關閉連接了。”
客戶端：“好嘞。”
七、瀏覽器解析HTML
準確地說，瀏覽器需要加載解析的不僅僅是HTML，還包括CSS、JS。以及還要加載圖片、視頻等其他媒體資源。
瀏覽器通過解析HTML，生成DOM樹，解析CSS，生成CSS規則樹，然后通過DOM樹和CSS規則樹生成渲染樹。渲染樹與DOM樹不同，渲染樹中并沒有head、display為none等不必顯示的節點。
要注意的是，瀏覽器的解析過程并非是串連進行的，比如在解析CSS的同時，可以繼續加載解析HTML，但在解析執行JS腳本時，會停止解析后續HTML，這就會出現阻塞問題，關于JS阻塞相關問題，這里不過多闡述,后面會多帶帶開篇講解。
八、瀏覽器布局渲染
根據渲染樹布局，計算CSS樣式，即每個節點在頁面中的大小和位置等幾何信息。HTML默認是流式布局的，CSS和js會打破這種布局，改變DOM的外觀樣式以及大小和位置。這時就要提到兩個重要概念：replaint和reflow。
replaint：屏幕的一部分重畫，不影響整體布局，比如某個CSS的背景色變了，但元素的幾何尺寸和位置不變。
reflow： 意味著元件的幾何尺寸變了，我們需要重新驗證并計算渲染樹。是渲染樹的一部分或全部發生了變化。這就是Reflow，或是Layout。
所以我們應該盡量減少reflow和replaint，我想這也是為什么現在很少有用table布局的原因之一。
最后瀏覽器繪制各個節點，將頁面展示給用戶。
總結
本文系統地講述從瀏覽器從輸入域名到最終頁面展示的整體流程。篇幅所限，本文的每一步講述其實并不全面，所以后面我會多帶帶就域名解析、HTTP請求/響應、瀏覽器的解析、渲染等內容多帶帶開篇講解，感興趣的朋友也可以關注我的個人博客 。
更多技術分享，歡迎關注『網站建設運維百科』
參考：
http://igoro.com/archive/what...
http://taligarsiel.com/Projec...
https://www.zhihu.com/questio...
圖片制作工具：Axure、PS、 Ulead GIF Animator、 ProcessOn
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/26121.html
摘要：本文摘要域名解析建立連接發送請求服務器處理請求返回響應結果關閉連接瀏覽器解析瀏覽器布局渲染總結當我們在瀏覽器輸入網址并回車后，一切從這里開始。 本文摘要：1.DNS域名解析；2.建立TCP連接；3.發送HTTP請求；4.服務器處理請求；5.返回響應結果；6.關閉TCP連接；7.瀏覽器解析HTML；8.瀏覽器布局渲染；總結 showImg(https://segmentfault.com...
摘要：本文摘要域名解析建立連接發送請求服務器處理請求返回響應結果關閉連接瀏覽器解析瀏覽器布局渲染總結當我們在瀏覽器輸入網址并回車后，一切從這里開始。 本文摘要：1.DNS域名解析；2.建立TCP連接；3.發送HTTP請求；4.服務器處理請求；5.返回響應結果；6.關閉TCP連接；7.瀏覽器解析HTML；8.瀏覽器布局渲染；總結 showImg(https://segmentfault.com...
摘要：本文摘要域名解析建立連接發送請求服務器處理請求返回響應結果關閉連接瀏覽器解析瀏覽器布局渲染總結當我們在瀏覽器輸入網址并回車后，一切從這里開始。 本文摘要：1.DNS域名解析；2.建立TCP連接；3.發送HTTP請求；4.服務器處理請求；5.返回響應結果；6.關閉TCP連接；7.瀏覽器解析HTML；8.瀏覽器布局渲染；總結 showImg(https://segmentfault.com...
摘要：本文摘要域名解析建立連接發送請求服務器處理請求返回響應結果關閉連接瀏覽器解析瀏覽器布局渲染總結當我們在瀏覽器輸入網址并回車后，一切從這里開始。 本文摘要：1.DNS域名解析；2.建立TCP連接；3.發送HTTP請求；4.服務器處理請求；5.返回響應結果；6.關閉TCP連接；7.瀏覽器解析HTML；8.瀏覽器布局渲染；總結 showImg(https://segmentfault.com...
摘要：在前一篇介紹的數據加載中的例子都是從靜態的文件中取得數據，而更大的價值在于與后端服務器進行數據傳遞，動態地請求和發送數據。首先用方式請求數據方式點擊標簽后，當前頁面為數據請求成功。 在前一篇介紹 jQuery Ajax 的數據加載中的例子都是從靜態的文件中取得數據，而 Ajax 更大的價值在于與后端服務器進行數據傳遞，動態地請求和發送數據。 請求數據 我們可以使用 GET、POST...
閱讀 1408·2023-04-26 01:58
閱讀 2282·2021-11-04 16:04
閱讀 1753·2021-08-31 09:42
閱讀 1765·2021-07-25 21:37
閱讀 1066·2019-08-30 15:54
閱讀 2074·2019-08-30 15:53
閱讀 3047·2019-08-29 13:28
閱讀 2687·2019-08-29 10:56
