輸入URL到展示頁面的全過程

最近在看一本關於網絡協議的書《圖解HTTP》

當咱們在瀏覽器的地址欄輸入 http://www.pwstrick.com ，而後回車，回車這一瞬間到看到頁面到底發生了什麼呢？

1.  域名解析

2. 創建TCP鏈接

3. 發起HTTP請求

4. 服務器響應HTTP請求

5. 瀏覽器渲染頁面

本身原先不是很瞭解，經過讀了這本書後瞭解了些內幕。

接下來將使用工具Chrome、Fiddler、Wireshark。曾經寫過一篇Fiddler的教程《移動開發中Fiddler的那些事兒》。

1、基礎概念

1）TCP/IP是互聯網相關的各種協議族的總稱

 

2）TCP/IP分爲4層：應用層、傳輸層、網絡層、鏈路層。

發送端從應用層網下走，接收端從鏈路層網上走。

IP（Internet Protocol）：網際協議位於網絡層，IP地址能夠和MAC地址配對。

ARP（Address Resolution Protocol）：ARP是一種用以解析地址的協議，根據通訊方的IP地址反查出對應的MAC地址。

Routing：路由選擇，有點像快遞公司的送貨過程。

TCP（Transmission Control Protocol）：傳輸控制協議，提供可靠的字節流傳輸，將大數據分割成報文段（segment），TCP協議可以確認數據最終是否送達到對方。

 

3）數據信息包裝

 

4）域名解析DNS服務

DNS（Domain Name System）位於應用層，提供域名和IP地址之間的解析服務。

 

5）URI和URL

URI（Uniform Resource Identifier）：統一資源標識符。

URL（Uniform Resoure Locator）：統一資源定位符，通俗的說法是網址。

URI表示某一互聯網資源，而URL表示資源地點，因此URL是URI的子集，下面是幾個URI資源。

 

6）RFC

RFC（Request For Comments）：徵求修正意見書，RFC是互聯網的設計文檔。

要是不按照RFC標準執行，就有可能致使沒法通訊的情況。

 

7）HTTP

HTTP是無狀態協議，協議對於發送過的請求或響應都不作持久化處理。

HTTP/1.1爲了實現保持狀態的功能，引入了Cookie。

 

2、域名解析

在《What really happens when you navigate to a URL》中曾提到DNS會先在緩存中查找記錄。

瀏覽器緩存、系統緩存、路由器緩存、ISP DNS 緩存、遞歸搜索。

 

3、創建TCP鏈接

 

1）發送端發送一個帶SYN標誌的數據包給對方

Sequence Number：序號；

Acknowledgment Number：確認號。

 

2）接收端回傳一個帶有SYN和ACK標誌的數據包以示傳達確認信息

 

3）發送端再回傳一個帶ACK標誌的數據包，表明「握手結束」

 

4、發起HTTP請求

HTTP（Hyper Text Transfer Protocol），超文本傳輸協議，由請求和響應構成。

在書本的第3章介紹了HTTP信息。

1）請求報文

報文首部內容以下：

在書本的第6章中有詳細的HTTP首部說明。

「Connection:keep-alive」：持久鏈接，只要任意一端沒有明確提出斷開，就保持TCP鏈接狀態。

 

2）響應報文

報文首部內容以下：

上圖中的200是HTTP狀態碼，在書中的第4章詳細介紹了狀態碼。

 

5、服務器響應HTTP請求

從上面的響應報文中能夠看到服務器軟件是Nginx，而且請求的是一張PHP頁面。

之前曾經寫過一篇《PHP代碼的執行》，不過軟件用的是Apache。這裏就假設是Apache+PHP(fastcgi)架構提供服務。

1）Apache

Apache對HTTP的請求能夠分爲鏈接、處理和斷開鏈接3個大的階段。同時也能夠分爲上圖所示的11個小的階段。

 

2）FastCGI

FastCGI可讓一個客戶端，從網頁瀏覽器向執行在Web服務器上的程序請求數據。

好比如今請求的是「index.php」，根據配置文件，Apache知道這個不是靜態文 件，須要去找PHP解析器來處理，那麼它會把這個請求簡單處理後交給PHP解析器。

Apache會傳url、查詢字符串、POST數據、HTTP header等，而CGI就是規定要傳哪些數據、以什麼樣的格式傳遞給後方處理這個請求的協議。

 

3）PHP腳本執行

PHP程序完成基本的準備工做後啓動PHP及Zend引擎， 加載註冊的擴展模塊。

初始化完成後讀取腳本文件，Zend引擎對腳本文件進行詞法分析，語法分析。

編譯成opcode執行。

 

服務器最終將生成的HTML代碼返回給瀏覽器。

 

6、瀏覽器渲染頁面

從Chrome的網絡工具中能夠看到，瀏覽器會先下載HTML代碼，再去下載CSS或JS外部資源。

網上的不少資料顯示，瀏覽器是邊下載HTML，邊解析HTML的。

有篇文章叫《How browsers work》介紹瀏覽器內部工做原理的，文中提到了瀏覽器的渲染引擎——Webkit。

渲染引擎首先經過網絡得到所請求文檔的內容，一般以8K分塊的方式完成，下面是渲染引擎基本流程：

解析HTML以構建DOM樹 -> 構建Render（渲染）樹 -> 佈局Render樹 -> 繪製Render樹

下圖是Webkit的主流程：

 

參考資料：

Wireshark基本用法

當你輸入一個網址，實際會發生什麼?

一次完整的HTTP事務是怎樣一個過程

從輸入url到頁面加載完的過程當中都發生了什麼事情

當在瀏覽器地址欄輸入一個URL後回車，將會發生的事情？