"天龍八步"細說瀏覽器輸入URL後發生了什麼

                                                    

本文摘要：
1.DNS域名解析；
2.創建TCP鏈接；
3.發送HTTP請求；
4.服務器處理請求；
5.返回響應結果；
6.關閉TCP鏈接；
7.瀏覽器解析HTML；
8.瀏覽器佈局渲染；
總結複製代碼

                             

當咱們在瀏覽器輸入網址並回車後，一切從這裏開始。

1、DNS域名解析

咱們在瀏覽器輸入網址，其實就是要向服務器請求咱們想要的頁面內容，全部瀏覽器首先要確認的是域名所對應的服務器在哪裏。將域名解析成對應的服務器IP地址這項工做，是由DNS服務器來完成的。

客戶端收到你輸入的域名地址後，它首先去找本地的hosts文件，檢查在該文件中是否有相應的域名、IP對應關係，若是有，則向其IP地址發送請求，若是沒有，再去找DNS服務器。通常用戶不多去編輯修改hosts文件。

DNS服務器層次結構

瀏覽器客戶端向本地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服務器的地址，所以請求根域名服務器這一步不是必需的。

2、創建TCP連接

費了一頓周折終於拿到服務器IP了，下一步天然就是連接到該服務器。對於客戶端與服務器的TCP連接，必然要說的就是『三次握手』。

客戶端發送一個帶有SYN標誌的數據包給服務端，服務端收到後，回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息，最後客戶端再回傳一個帶ACK標誌的數據包，表明握手結束，鏈接成功。

上圖也能夠這麼理解：

客戶端：「你好，在家不，有你快遞。」

服務端：「在的，送來就行。」

客戶端：「好嘞。」

3、發送HTTP請求

與服務器創建了鏈接後，就能夠向服務器發起請求了。這裏咱們先看下請求報文的結構（以下圖）：

在瀏覽器中查看報文首部（以google瀏覽器爲例）：

                               

請求行包括請求方法、URI、HTTP版本。首部字段傳遞重要信息，包括請求首部字段、通用首部字段和實體首部字段。咱們能夠從報文中看到發出的請求的具體信息。具體每一個首部字段的做用，這裏不作過多闡述。

4、服務器處理請求

服務器端收到請求後的由web服務器（準確說應該是http服務器）處理請求，諸如Apache、Ngnix、IIS等。web服務器解析用戶請求，知道了須要調度哪些資源文件，再經過相應的這些資源文件處理用戶請求和參數，並調用數據庫信息，最後將結果經過web服務器返回給瀏覽器客戶端。

5、返回響應結果

在HTTP裏，有請求就會有響應，哪怕是錯誤信息。這裏咱們一樣看下響應報文的組成結構：

在響應結果中都會有個一個HTTP狀態碼，好比咱們熟知的200、30一、40四、500等。經過這個狀態碼咱們能夠知道服務器端的處理是否正常，並能瞭解具體的錯誤。

狀態碼由3位數字和緣由短語組成。根據首位數字，狀態碼能夠分爲五類：

                                 

6、關閉TCP鏈接

爲了不服務器與客戶端雙方的資源佔用和損耗，當雙方沒有請求或響應傳遞時，任意一方均可以發起關閉請求。與建立TCP鏈接的3次握手相似，關閉TCP鏈接，須要4次握手。

                           

上圖能夠這麼理解：

客戶端：「兄弟，我這邊沒數據要傳了，咱關閉鏈接吧。」

服務端：「收到，我看看我這邊有木有數據了。」

服務端：「兄弟，我這邊也沒數據要傳你了，咱能夠關閉鏈接了。」

客戶端：「好嘞。」

7、瀏覽器解析HTML

準確地說，瀏覽器須要加載解析的不只僅是HTML，還包括CSS、JS。以及還要加載圖片、視頻等其餘媒體資源。

瀏覽器經過解析HTML，生成DOM樹，解析CSS，生成CSS規則樹，而後經過DOM樹和CSS規則樹生成渲染樹。渲染樹與DOM樹不一樣，渲染樹中並無head、display爲none等沒必要顯示的節點。

要注意的是，瀏覽器的解析過程並不是是串連進行的，好比在解析CSS的同時，能夠繼續加載解析HTML，但在解析執行JS腳本時，會中止解析後續HTML，這就會出現阻塞問題，關於JS阻塞相關問題，這裏不過多闡述,後面會單獨開篇講解。

8、瀏覽器佈局渲染

根據渲染樹佈局，計算CSS樣式，即每一個節點在頁面中的大小和位置等幾何信息。HTML默認是流式佈局的，CSS和js會打破這種佈局，改變DOM的外觀樣式以及大小和位置。這時就要提到兩個重要概念：replaint和reflow。

replaint：屏幕的一部分重畫，不影響總體佈局，好比某個CSS的背景色變了，但元素的幾何尺寸和位置不變。

reflow： 意味着元件的幾何尺寸變了，咱們須要從新驗證並計算渲染樹。是渲染樹的一部分或所有發生了變化。這就是Reflow，或是Layout。

因此咱們應該儘可能減小reflow和replaint，我想這也是爲何如今不多有用table佈局的緣由之一。

最後瀏覽器繪製各個節點，將頁面展現給用戶。

總結

本文系統地講述從瀏覽器從輸入域名到最終頁面展現的總體流程。篇幅所限，本文的每一步講述其實並不全面，因此後面我會單獨就域名解析、HTTP請求/響應、瀏覽器的解析、渲染等內容單獨開篇講解，感興趣的朋友也能夠關注個人我的博客 。

                                         更多技術分享，歡迎關注『網站建設運維百科』

                                                    

參考：

http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/

http://taligarsiel.com/Projects/howbrowserswork1.htm

https://www.zhihu.com/question/34873227

圖片製做工具：Axure、PS、 Ulead GIF Animator、 ProcessOn