1. 程式人生 > >從瀏覽器輸入網址到頁面顯示的全過程

從瀏覽器輸入網址到頁面顯示的全過程

物理層 頁面 緩存 本地磁盤 緩存服務器 ip報頭 行數 web dns

【前言】從全局來講,當鍵入一個url時,肯定是需要從服務器請求某個頁面或某條數據然後顯示到用戶自己的電腦屏幕上。這個過程中其實包括:DNS對url域名的解析(在url中解析出服務器所在的IP地址,有的url也包括端口),計算機網絡中的五層協議層傳輸,代理服務器的響應、緩存或者負載均衡、最終html/css/js文件的解析與展現。從後端到前端,這只是概括,接下來將展開分析。

  持續更新,逐步完善。主要從TCP協議族、DNS、三次握手、服務器緩存和代理、負載均衡、四次揮手、html顯示和渲染、流行的服務器類型和前端類型...爭取精要簡明。

一、客戶端請求

  1.DNS對url域名的解析,獲取主機所在的IP地址:

  (1)瀏覽器將url中抽取出主機名(域名),並將主機名傳送給DNS應用的客戶端;

  (2)DNS客戶端向最近的DNS服務器發送一個包含主機名的請求,有可能逐級向上請求;

  (3)DNS客戶端最終會收到一份回答報文,其中包含有對該主機名的IP地址。

  2.瀏覽器接收到來自DNS的IP地址,然後向位於該IP地址的80端口的HTTP服務器發起一個TCP連接(三次握手):

①客戶端發送一個帶SYN標誌的TCP報文到服務器,這是第一次握手。

②服務器端發送一個相應報文回應客戶端,這個報文同時帶ACK標誌和SYN標誌。表示對剛才客戶端SYN報文的回應,同時又標誌ACK給客戶端,詢問客戶端是否準備好進行數據通訊。這是第二次握手

③客戶端必須再次回應服務端一個ACK報文進行確認,同時發送一個HTTP請求給客戶端,這是第三次握手。

註意:每一次進行客戶端到服務器端或服務器端到客戶端的通訊都要經歷這麽幾個步驟:從源的應用層-》傳輸層-》網絡層-》鏈路層-》物理層—…………—到目的端的物理層-》鏈路層-》網絡層-》傳輸層-》應用層,這也是前端中常說的為什麽要減少客戶端向服務端HTTP請求的原因,因為太耗時了!這個過程在最後講解【註釋1】。

3.建立完TCP連接便可以進行通信了,服務器返回http響應:

握手完畢後,服務器已經收到了客戶端的http請求,服務器需要從本地磁盤找出客戶端請求的數據,然後返回一條HTTP響應給客戶端,並關閉TCP連接(但TCP只有當客戶端收到數據後才會完全關閉,此時只是服務器端單方面無法與客戶端傳輸數據)

4.客戶端收到http響應,並關閉TCP連接:

由於TCP連接是雙全工的,因此每個方向必須單獨進行關閉。 這原則上是當一方完成它的數據發送任務後就能發送一個FIN來終止這個方向上的連接。收到一個FIN意味著這一方向上沒有數據流動,一個TCP連接在收到一個FIN後仍然能發送數據。首先關閉的一方執行主動關閉,而另一方執行被動關閉, 3,4條中的TCP連接關閉細節(四次揮手)如下:

①服務器發送一個FIN,用來關閉服務端器到客戶端的數據傳送(第一次揮手)

②客戶端收到這個FIN,它返回一個ACK,確認收到(第二次揮手)

③客戶端關閉服務器的連接,發送一個FIN給服務器(第三次揮手)

④服務器收到這個FIN,斌返回ACK報文,確認收到(第四次揮手)

5.以上2,3,4條都是針對請求的該網站沒有緩存代理的情況,如果該網站存在代理服務器,那麽將由代理服務器來協調客戶端與服務器的通信(此處很多細節在前面講過就不再贅述,比如三次握手建立TCP連接,四次揮手關閉TCP連接的詳細過程),如下:

①客戶端建立一個到web緩存的TCP連接,並向web緩存器發送一條HTTP請求。

②web緩存器進行檢查,看看本地是否存儲了該對象的副本,如果有,web緩存服務器就向客戶端發送一個HTTP響應報文。

③如果web緩存器中沒有該資源,就打開一個到該對象初始服務器的TCP連接。web緩存器則在這個緩存器到服務器的TCP上發送一個HTTP請求,初始服務器返回HTTP相應。

④web緩存器收到響應後,在本地存儲一份副本,並向客戶端的瀏覽器用HTTP響應報文發送該副本。

6.客戶端收到http響應發送過來的文件,並將文件解析成頁面展示給用戶:

①解析html構建DOM樹

②構建render樹

③布局render樹

④繪制render樹

當然,這個過程避免不了回流和重繪,這也是我們前端人員在開發中需要著重考慮的事情。

【註釋1】過程:

源的應用層-》傳輸層-》網絡層-》鏈路層-》物理層———………———目的端的物理層-》鏈路層-》網絡層-》傳輸層-》應用層

(1)在源主機上,應用層將一串應用數據流傳送給傳輸層。

(2)傳輸層將應用層的數據流截成分組,並加上TCP報頭形成TCP段,送交網絡層。

(3)在網絡層給TCP報頭加上源,目的主機IP地址和IP報頭,生成一個IP數據報,並將IP數據包送交給鏈路層。

(4)鏈路層在其MAC幀的數據部分裝上IP數據報,再加上源,目的主機的MAC地址和幀頭,並根據其目的MAC地址發送目的主機或IP路由器。

(5)在目的主機,鏈路層將MAC幀的幀頭去掉,並將IP數據發送至網絡層。

(6)網絡層檢查IP報頭,如果報頭和計算結果不一樣,則丟棄IP數據包,則向源主機要求重發消息。若檢驗和計算結果一致,則去掉報頭,將TCP段發送至傳輸層。

(7)傳輸層檢查順序號,判斷是否是正確的TCP分組,然後檢查TCP報頭數據。若正確,則去掉TCP報頭,向源主機發送數據分組。否則,向源主機要求重發消息。

(8)目的主機收到來自源主機的字節流。

從瀏覽器輸入網址到頁面顯示的全過程