<s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

    1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>

      “天龍八步”細說瀏覽器輸入URL后發生了什么

      2018-04-09 14:21:00
      薛才杰
      原創
      16384


      本文摘要:
      1.DNS域名解析;
      2.建立TCP連接;
      3.發送HTTP請求;
      4.服務器處理請求;
      5.返回響應結果;
      6.關閉TCP連接;
      7.瀏覽器解析HTML;
      8.瀏覽器布局渲染;
      總結




      輸入網址

      當我們在瀏覽器輸入網址并回車后,一切從這里開始。

      一、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服務器的地址,因此請求根域名服務器這一步不是必需的。

      二、建立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-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

      聯系我們

      聯系人:ZSITE交流群

      電話/微信:

      Email:

      QQ:

      地址:青島市黃島區井岡山路157號中南金石國際廣場A座3205室

      无遮挡H肉动漫视频在线观看
        <s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

      1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>