1. 程式人生 > >一個完整的網路訪問過程的分析(巨集觀角度分析)

一個完整的網路訪問過程的分析(巨集觀角度分析)

我們以訪問百度為例,來一步步分析一個完整的網路訪問過程是怎樣的

當我們輸入http://www.baidu.com,然後按回車,發生的一系列事情如下:

在這裡我們通過使用ie的F12開發人員工具進行分析:

1、首先,會進行一次DNS域名解析(就是找到對應的IP地址),DNS解析有將近10步,分別是

1a、檢查瀏覽器快取中是否有對應對映,有就結束;1b、檢查作業系統快取(hosts檔案)中是否有對應對映;1c、訪問我們電腦配置中的DNS(即LDNS)中看是否有對應對映

大約80%的域名解析在這就完成了;1d、直接到root server請求解析; 1e、根域名伺服器返回給LDNS一個所查域的主域名伺服器(gTLD);1f、LDNS向主域名伺服器發出解析請求;1g、gTLD查詢並返回對應的name server(就是你註冊的域名伺服器)域名伺服器地址;1h、name server查詢到對應對映將結果返回給LDNS;1i、LDNS快取這個對映,並把結果返回給使用者

2、查詢到對應的ip之後,瀏覽器就會向對應的ip傳送一個http請求,具體的請求如下圖:


對於每個欄位的含義,在此處就不一一解釋了

3、請求到達伺服器之前可能還會經過CDN、反向代理伺服器等,如下圖


4、到達真正的伺服器端之後,伺服器那邊經過複雜的業務邏輯(有的也許很簡單),返回給瀏覽器一個響應,如下圖:


5、瀏覽器接收到響應結果後會進行渲染,大體的渲染過程是這樣的:

5a、瀏覽器解析html原始碼,然後建立一個 DOM樹。
在DOM樹中,每一個HTML標籤都有一個對應的節點,並且每一個文字也都會有一個對應的文字節點。
DOM樹的根節點就是 documentElement,對應的是html標籤。


5b、瀏覽器解析CSS程式碼,計算出最終的樣式資料。
對CSS程式碼中非法的語法她會直接忽略掉。
解析CSS的時候會按照如下順序來定義優先順序:瀏覽器預設設定,使用者設定,外鏈樣式,內聯樣式,html中的style。

5c、構建出DOM樹,並且計算出樣式資料後,下一步就是構建一個 渲染樹(rendering tree)。
渲染樹和DOM樹有點像,但是是有區別的。DOM樹完全和html標籤一一對應,但是渲染樹會忽略掉不需要渲染的元素,比如head、display:none的元素等。
而且一大段文字中的每一個行在渲染樹中都是獨立的一個節點。
渲染樹中的每一個節點都儲存有對應的css屬性。

5d、一旦渲染樹建立好了,瀏覽器就可以根據渲染樹直接把頁面繪製到螢幕上。

當然,如果渲染的過程中發現還有一些靜態資源(如圖片、js等)的時候又會發出http請求

6、至此,一個完整的網站訪問流程就結束了。當然,其中還有很多的細節,這裡只是大體的分析了一下流程。關於更具體的網路的內容(包括包的流動等)可以檢視計算機網路一書(詳細的講解了從應用層到傳輸層到網路層再到網路介面層是怎樣一步步執行的,當然還有路由的選擇等等)。當然,伺服器那邊是如何進行資料的接收、處理的,也是值得我們深究的內容。