從輸入域名到最後呈現經歷的過程

路過人間發表於2018-03-30

具體步驟

1.瀏覽器的位址列輸入URL並按下回車。
2.瀏覽器查詢當前URL是否存在快取，並比較快取是否過期。
3.DNS解析URL對應的IP。
4.根據IP建立TCP連線（三次握手）。
5.HTTP發起請求。
6.伺服器處理請求，瀏覽器接收HTTP響應。
7.渲染頁面，構建DOM樹。
8.關閉TCP連線（四次揮手）。

詳細描述

1.HTTP快取有多種規則，根據是否需要重新向伺服器發起請求分為兩種：強制快取，對比快取.

強制快取：
    cache-control：中的max-age儲存一個相對時間。表示瀏覽器接收到檔案之後，快取在相對應的時間內均有效。如果同時存在cache-control和Expires,瀏覽器優先使用cache-control
    Expires：是一個絕對時間，即伺服器時間。瀏覽器檢查當前時間，如果還沒有失效就直接用快取檔案。該方法有一個問題，伺服器可能和客戶端時間不一致，因此該欄位很少使用。 
對比快取：
    last-modified是第一次請求資源時，伺服器返回的欄位，表示最後一次更新時間。下次瀏覽器請求資源時就傳送if-modified-since欄位。伺服器用本地last-modified時間與if-modified-since時間比較，如果不一致則認為快取已過期並返回新的資源給瀏覽器，如果時間一致則返回304狀態碼，讓瀏覽器繼續使用快取。
    Etag：資源的實體標識（雜湊字串），當資源內容更新時，Etag會改變。伺服器會判斷Etag是否變化，如果變化返回新資源，否則返回304。
複製程式碼

2.域名解析

在位址列輸入域名並不是最後資源所在的真實位置，域名只是一個IP地址的一個對映。

1.首先瀏覽器會先查詢本地hosts檔案是否有這個網址對映關係，如果有就呼叫這個IP地址對映，完成域名解析。
2.如果沒有找到則會查詢本地的DNS解析器快取，如果找到則返回。
3.如果還是沒有找到則會查詢本地DNS伺服器，如果找到則返回。
4.最後迭代查詢，按根域伺服器->頂級域名.cn->第二層域名->子域名的順序找到IP地址
複製程式碼

3.發起TCP的3次握手

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

第一次握手：建立連線時，客戶端傳送syn包(syn=j)到伺服器，並進入SYN_SENT狀態，等待伺服器確認；
第二層握手：伺服器接收到syn包，必須確認客戶端的SYN(ack=j+1)，同時自己也傳送一個SYN包(syn=k)，即SYN+ACK包，此時伺服器進入SYN_RECV狀態；
第三次握手：客戶端收到伺服器的SYN_ACK包，向伺服器傳送確認包ACK(ack=k+1)，此包傳送完畢，客戶端和伺服器進入ESTABLISHED(TCP連線成功)狀態，完成三次握手。
複製程式碼

4.建立TCP連線後發起http請求

完整的HTTP請求包含請求行，請求頭部，請求主體三個部分。(具體就不一一講述了)
複製程式碼

5.伺服器響應http請求，瀏覽器接收響應

伺服器在收到瀏覽器傳送的HTTP請求之後，會收到HTTP報文封裝成HTTP的Request物件，並通過不同的web伺服器進行處理，處理完的結果以HTTP的Response物件返回，主要包括狀態碼，響應頭，響應報文三個部分。
狀態碼主要包括以下部分：
    1xx：指示資訊-表示請求已接收，繼續處理
    2xx：成功-表示請求已被成功接收，理解，接收
    3xx：重定向-要完成請求必須進行更進一步的操作
    4xx：客戶端錯誤-請求語法錯誤或請求無法實現
    5xx：伺服器端錯誤：伺服器未能合法實現請求
響應頭主要由：cache-control、connection、date、pragma等組成。
複製程式碼

6.瀏覽器解析html，頁面渲染

在瀏覽器還沒接收到完整的HTML檔案時，它就開始渲染頁面了，在遇到外部鏈入的指令碼或圖片時，會再次發生HTTP請求重複上述步驟。在收到css檔案後對已經渲染的頁面重新渲染，加入它們對應的樣式，圖片檔案載入完立刻顯示在相應的位置。在這一過程中可能會觸發重繪或重排。

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

7.四次揮手結束，關閉TCP連線

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

    第一次揮手：瀏覽器發完資料後，發生FIN請求斷開連線
    第二次揮手：伺服器傳送ACK表示同意斷開連線
    第三次揮手：伺服器傳送FIN請求斷開連線
    第四次揮手：瀏覽器需要返回ACK表示同意斷開
複製程式碼

相關文章