從輸入url到顯示網頁發生了什麼

rosenWang發表於2018-11-19
網頁

在瀏覽器中輸入url到顯示網頁主要包含兩個部分： 網路通訊和頁面渲染
網際網路內各網路裝置間的通訊都遵循TCP/IP協議，利用TCP/IP協議族進行網路通訊時，會通過分層順序與對方進行通訊。分層由高到低分別為：應用層、傳輸層、網路層、資料鏈路層。傳送端從應用層往下走，接收端從資料鏈路層網上走

1.瀏覽器的位址列輸入URL並按下回車

我們常見的RUL是這樣的:www.baidu.com,域名通常由3部分組成：協議 域名 埠號

  1. 協議：主要是HTTP協議，HTTPS協議，FTP協議，FILe協議
  2. 域名：url中間部分為域名或者IP
  3. 埠號：通常預設都是隱藏的 http預設埠號為80 https預設埠號為443

涉及知識點： 跨域
在前端進行資料請求時，由於瀏覽器的同源策略，協議，域名，埠號有一個不同會存在跨域請求，需要進行跨域處理，相關的跨域方法點選user-gold-cdn.xitu.io/2018/11/19/…

2.DNS域名解析

網際網路上每一臺計算機的唯一標識是它的IP地址，但是IP地址並不方便記憶。使用者更喜歡用方便記憶的網址去尋找網際網路上的其它計算機，也就是上面提到的百度的網址。所以網際網路設計者需要在使用者的方便性與可用性方面做一個權衡，這個權衡就是一個網址到IP地址的轉換，這個過程就是DNS解析，即實現了網址到IP地址的轉換

解析過程

DNS解析是一個遞迴查詢的過程。

從輸入url到顯示網頁發生了什麼
上述圖片是查詢www.google.com的IP地址過程。首先在本地域名伺服器中查詢IP地址，如果沒有找到的情況下，本地域名伺服器會向根域名伺服器傳送一個請求，如果根域名伺服器也不存在該域名時，本地域名會向com頂級域名伺服器傳送一個請求，依次類推下去。直到最後本地域名伺服器得到google的IP地址並把它快取到本地，供下次查詢使用。從上述過程中，可以看出網址的解析是一個從右向左的過程: com -> google.com -> www.google.com。但是你是否發現少了點什麼，根域名伺服器的解析過程呢？事實上，真正的網址是www.google.com.，並不是我多打了一個.，這個.對應的就是根域名伺服器，預設情況下所有的網址的最後一位都是.，既然是預設情況下，為了方便使用者，通常都會省略，瀏覽器在請求DNS的時候會自動加上，所有網址真正的解析過程為: . -> .com -> google.com. -> www.google.com.。

DNS優化

DNS快取和DNS負載均衡

DNS快取

DNS存在著多級快取，從離瀏覽器的距離排序的話，有以下幾種: 瀏覽器快取，系統快取，路由器快取，IPS伺服器快取，根域名伺服器快取，頂級域名伺服器快取，主域名伺服器快取。

  1. 在你的chrome瀏覽器中輸入:chrome://dns/，你可以看到chrome瀏覽器的DNS快取。

  2. 系統快取主要存在/etc/hosts(Linux系統)中:

    從輸入url到顯示網頁發生了什麼

DNS負載均衡

真實的網際網路世界背後存在成千上百臺伺服器，大型的網站甚至更多。但是在使用者的眼中，它需要的只是處理他的請求，哪臺機器處理請求並不重要。DNS可以返回一個合適的機器的IP給使用者，例如可以根據每臺機器的負載量，該機器離使用者地理位置的距離等等，這種過程就是DNS負載均衡，又叫做DNS重定向

3.建立TCP連線

在通過DNS域名解析後，獲取到了伺服器的IP地址，在獲取到IP地址後，便會開始建立一次連線，這是由TCP協議完成的，主要通過三次握手進行連線。

  1. 第一次握手： 建立連線時，客戶端傳送syn包（syn=j）到伺服器，並進入SYN_SENT狀態，等待伺服器確認；
  2. 第二次握手： 伺服器收到syn包，必須確認客戶的SYN（ack=j+1），同時自己也傳送一個SYN包（syn=k），即SYN+ACK包，此時伺服器進入SYN_RECV狀態；
  3. 第三次握手： 客戶端收到伺服器的SYN+ACK包，向伺服器傳送確認包ACK(ack=k+1），此包傳送完畢，客戶端和伺服器進入ESTABLISHED（TCP連線成功）狀態，完成三次握手。 這裡需要了解下ACK，SYN的意義
    從輸入url到顯示網頁發生了什麼
    完成TCP連線後開使向伺服器進行請求

4.向伺服器傳送請求

完整的HTTP請求包含請求起始行、請求頭部、請求主體三部分。

從輸入url到顯示網頁發生了什麼

5.伺服器接受響應

伺服器在收到瀏覽器傳送的HTTP請求之後，會將收到的HTTP報文封裝成HTTP的Request物件，並通過不同的Web伺服器進行處理，處理完的結果以HTTP的Response物件返回，主要包括狀態碼，響應頭，響應報文三個部分。
狀態碼主要包括以下部分:

1xx：指示資訊–表示請求已接收，繼續處理。
2xx：成功–表示請求已被成功接收、理解、接受。
3xx：重定向–要完成請求必須進行更進一步的操作。
4xx：客戶端錯誤–請求有語法錯誤或請求無法實現。
5xx：伺服器端錯誤–伺服器未能實現合法的請求。

響應頭主要由Cache-Control、 Connection、Date、Pragma等組成。
響應體為伺服器返回給瀏覽器的資訊，主要由HTML，css，js，圖片檔案組成。

6.頁面渲染

 如果說響應的內容是HTML文件的話，就需要瀏覽器進行解析渲染呈現給使用者。整個過程涉及兩個方面：解析和渲染。在渲染頁面之前，需要構建DOM樹和CSSOM樹。  在瀏覽器還沒接收到完整的 HTML 檔案時，它就開始渲染頁面了，在遇到外部鏈入的指令碼標籤或樣式標籤或圖片時，會再次傳送 HTTP 請求重複上述的步驟。在收到 CSS 檔案後會對已經渲染的頁面重新渲染，加入它們應有的樣式，圖片檔案載入完立刻顯示在相應位置。在這一過程中可能會觸發頁面的重繪或重排。這裡就涉及了兩個重要概念：Reflow和Repaint。

從輸入url到顯示網頁發生了什麼

  1. Reflow，也稱作Layout，中文叫回流，一般意味著元素的內容、結構、位置或尺寸發生了變化，需要重新計算樣式和渲染樹，這個過程稱為Reflow。
  2. Repaint，中文重繪，意味著元素髮生的改變只是影響了元素的一些外觀之類的時候（例如，背景色，邊框顏色，文字顏色等），此時只需要應用新樣式繪製這個元素就OK了，這個過程稱為Repaint。

所以說Reflow的成本比Repaint的成本高得多的多。DOM樹裡的每個結點都會有reflow方法，一個結點的reflow很有可能導致子結點，甚至父點以及同級結點的reflow。

7.關閉TCP連線或繼續保持連線

通過四次揮手關閉連線(FIN ACK, ACK, FIN ACK, ACK)。

從輸入url到顯示網頁發生了什麼

  1. 第一次揮手：Client傳送一個FIN，用來關閉Client到Server的資料傳送，Client進入FIN_WAIT_1狀態。
  2. 第二次揮手：Server收到FIN後，傳送一個ACK給Client，確認序號為收到序號+1（與SYN相同，一個FIN佔用一個序號），Server進入CLOSE_WAIT狀態。
  3. 第三次揮手：Server傳送一個FIN，用來關閉Server到Client的資料傳送，Server進入LAST_ACK狀態。
  4. 第四次揮手：Client收到FIN後，Client進入TIME_WAIT狀態，接著傳送一個ACK給Server，確認序號為收到序號+1，Server進入CLOSED狀態，完成四次揮手。

相關文章