天天看點

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

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

當我們在浏覽器的位址欄輸入 http://www.pwstrick.com ,然後回車,回車這一瞬間到看到頁面到底發生了什麼呢?

1.  域名解析

2. 建立TCP連接配接

3. 發起HTTP請求

4. 伺服器響應HTTP請求

5. 浏覽器渲染頁面

自己原先不是很了解,通過讀了這本書後了解了些内幕。

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

一、基礎概念

1)TCP/IP是網際網路相關的各類協定族的總稱

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

2)TCP/IP分為4層:應用層、傳輸層、網絡層、鍊路層。

發送端從應用層網下走,接收端從鍊路層網上走。

IP(Internet Protocol):網際協定位于網絡層,IP位址可以和MAC位址配對。

ARP(Address Resolution Protocol):ARP是一種用以解析位址的協定,根據通信方的IP位址反查出對應的MAC位址。

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

TCP(Transmission Control Protocol):傳輸控制協定,提供可靠的位元組流傳輸,将大資料分割成封包段(segment),TCP協定能夠确認資料最終是否送達到對方。

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

3)資料資訊包裝

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

4)域名解析DNS服務

DNS(Domain Name System)位于應用層,提供域名和IP位址之間的解析服務。

5)URI和URL

URI(Uniform Resource Identifier):統一資源辨別符。

URL(Uniform Resoure Locator):統一資源定位符,通俗的說法是網址。

URI表示某一網際網路資源,而URL表示資源地點,是以URL是URI的子集,下面是幾個URI資源。

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

6)RFC

RFC(Request For Comments):征求修正意見書,RFC是網際網路的設計文檔。

要是不按照RFC标準執行,就有可能導緻無法通信的狀況。

7)HTTP

HTTP是無狀态協定,協定對于發送過的請求或響應都不做持久化處理。

HTTP/1.1為了實作保持狀态的功能,引入了Cookie。

二、域名解析

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

浏覽器緩存、系統緩存、路由器緩存、ISP DNS 緩存、遞歸搜尋。

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

三、建立TCP連接配接

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面
輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

1)發送端發送一個帶SYN标志的資料包給對方

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

Sequence Number:序号;

Acknowledgment Number:确認号。

2)接收端回傳一個帶有SYN和ACK标志的資料包以示傳達确認資訊

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

3)發送端再回傳一個帶ACK标志的資料包,代表“握手結束”

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

四、發起HTTP請求

HTTP(Hyper Text Transfer Protocol),超文本傳輸協定,由請求和響應構成。

在書本的第3章介紹了HTTP資訊。

1)請求封包

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

封包首部内容如下:

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

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

“Connection:keep-alive”:持久連接配接,隻要任意一端沒有明确提出斷開,就保持TCP連接配接狀态。

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

2)響應封包

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

封包首部内容如下:

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

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

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

五、伺服器響應HTTP請求

從上面的響應封包中可以看到伺服器軟體是Nginx,并且請求的是一張PHP頁面。

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

1)Apache

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

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代碼傳回給浏覽器。

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

六、浏覽器渲染頁面

從Chrome的網絡工具中可以看到,浏覽器會先下載下傳HTML代碼,再去下載下傳CSS或JS外部資源。

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

網上的很多資料顯示,浏覽器是邊下載下傳HTML,邊解析HTML的。

有篇文章叫《How browsers work》介紹浏覽器内部工作原理的,文中提到了浏覽器的渲染引擎——Webkit。

渲染引擎首先通過網絡獲得所請求文檔的内容,通常以8K分塊的方式完成,下面是渲染引擎基本流程:

解析HTML以建構DOM樹 -> 建構Render(渲染)樹 -> 布局Render樹 -> 繪制Render樹

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

下圖是Webkit的主流程:

輸入URL到展現頁面的全過程一、基礎概念二、域名解析三、建立TCP連接配接四、發起HTTP請求五、伺服器響應HTTP請求六、浏覽器渲染頁面

參考資料:

Wireshark基本用法

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

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

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

當在浏覽器位址欄輸入一個URL後回車,将會發生的事情?