從URL輸入到頁面展現到底發生什麼？DNS 解析&TCP 連接

DNS 解析:將功能變數名稱解析成 IP 地址 TCP 連接：TCP 三次握手發送 HTTP 請求伺服器處理請求並返回 HTTP 報文瀏覽器解析渲染頁面斷開連接：TCP 四次揮手一、什麼是URL？ URL（Uniform Resource Locator），統一資源定位符，用於定位互聯網上資源，俗 ...

DNS 解析:將功能變數名稱解析成 IP 地址
TCP 連接：TCP 三次握手
發送 HTTP 請求
伺服器處理請求並返回 HTTP 報文
瀏覽器解析渲染頁面
斷開連接：TCP 四次揮手

一、什麼是URL？

URL（Uniform Resource Locator），統一資源定位符，用於定位互聯網上資源，俗稱網址。

scheme: // host.domain:port / path / filename ? abc = 123 # 456789

scheme       - 定義網際網路服務的類型。常見的協議有 http、https、ftp、file，
               其中最常見的類型是 http，而 https 則是進行加密的網路傳輸。
host         - 定義域主機（http 的預設主機是 www）
domain       - 定義網際網路功能變數名稱，比如 baidu.com
port         - 定義主機上的埠號（http 的預設埠號是 80）
path         - 定義伺服器上的路徑（如果省略，則文檔必須位於網站的根目錄中）。
filename     - 定義文檔/資源的名稱
query        - 即查詢參數
fragment     - 即 # 後的hash值，一般用來定位到某個位置

二、DNS功能變數名稱解析

在瀏覽器輸入網址後，首先要經過功能變數名稱解析，因為瀏覽器並不能直接通過功能變數名稱找到對應的伺服器，而是要通過 IP 地址。

DNS 是：
一個由分層的 DNS 伺服器實現的分散式資料庫
一個使得主機能夠查詢分散式資料庫的應用層協議

什麼是分散式？

這個世界上沒有一臺 DNS 伺服器擁有網際網路上所有主機的映射，每台 DNS 只負責部分映射。

什麼是層次？

DNS 伺服器有 3 種類型：根 DNS 伺服器、頂級域（Top-Level Domain, TLD）DNS 伺服器和權威 DNS 伺服器。它們的層次結構如下圖所示：

IP 地址

IP 地址是指互聯網協議地址，是 IP Address 的縮寫。IP 地址是 IP 協議提供的一種統一的地址格式，
它為互聯網上的每一個網路和每一臺主機分配一個邏輯地址，以此來屏蔽物理地址的差異。

什麼是功能變數名稱解析

DNS 協議提供通過功能變數名稱查找 IP 地址，或逆向從 IP 地址反查功能變數名稱的服務。
DNS 是一個網路伺服器，我們的功能變數名稱解析簡單來說就是在 DNS 上記錄一條信息記錄。

瀏覽器如何通過功能變數名稱去查詢 URL 對應的 IP 呢？

DNS功能變數名稱解析分為遞歸查詢和迭代查詢兩種方式，現一般為迭代查詢。

三、TCP三次握手

客戶端發送一個帶 SYN=1，Seq=X 的數據包到伺服器埠（第一次握手，由瀏覽器發起，告訴伺服器我要發送請求了）
伺服器發回一個帶 SYN=1， ACK=X+1， Seq=Y 的響應包以示傳達確認信息（第二次握手，由伺服器發起，告訴瀏覽器我準備接受了，你趕緊發送吧）
客戶端再回傳一個帶 ACK=Y+1， Seq=Z 的數據包，代表“握手結束”（第三次握手，由瀏覽器發送，告訴伺服器，我馬上就發了，準備接受吧）

總是要問：為什麼需要三次握手，兩次不行嗎？其實這是由 TCP 的自身特點可靠傳輸決定的。客戶端和服務端要進行可靠傳輸，那麼就需要確認雙方的接收和發送能力。第一次握手可以確認客服端的發送能力，第二次握手，確認了服務端的發送能力和接收能力，所以第三次握手才可以確認客戶端的接收能力。不然容易出現丟包的現象。

四、發送 HTTP 請求

TCP 三次握手結束後，開始發送 HTTP 請求報文。

HTTP是無連接的： 無連接的含義是限制每次連接只處理一個請求。伺服器處理完客戶的請求，並收到客戶的應答後，即斷開連接。採用這種方式可以節省傳輸時間。一個連接是由傳輸層來控制的，這從根本上不屬於HTTP的範圍。HTTP並不需要其底層的傳輸層協議是面向連接的，只需要它是可靠的，或不丟失消息的（至少返回錯誤）。
HTTP是可擴展的： 在 HTTP/1.0 中出現的 HTTP headers 讓協議擴展變得非常容易。只要服務端和客戶端就新 headers 達成語義一致，新功能就可以被輕鬆加入進來。
HTTP是無狀態： HTTP協議是無狀態協議。無狀態是指協議對於事務處理沒有記憶能力。缺少狀態意味著如果後續處理需要前面的信息，則它必須重傳，這樣可能導致每次連接傳送的數據量增大。另一方面，在伺服器不需要先前信息時它的應答就較快。使用Cookies可以創建有狀態的會話。
HTTP頭部信息

根據不同上下文，可將消息頭分為：

1、General headers（通用標頭）: 同時適用於請求和響應消息，但與最終消息主體中傳輸的數據無關的消息頭。

2、Request headers: 包含更多有關要獲取的資源或客戶端本身信息的消息頭。

3、Response headers: 包含有關響應的補充信息，如其位置或伺服器本身（名稱和版本等）的消息頭。

4、Entity headers（實體標頭）: 包含有關實體主體的更多信息，比如主體長(Content-Length)度或其MIME類型。

五、伺服器處理請求並返回 HTTP 報文

每台伺服器上都會安裝處理請求的應用——Web server。常見的web server產品有apache、nginx、IIS、Lighttpd等。

六、瀏覽器解析渲染頁面

用戶界面    (User Interface)    － 包括地址欄、後退/前進按鈕、書簽目錄等，也就是你所看到的除了用來顯示你所請求頁面的主視窗之外的其他部分

瀏覽器引擎  (Browser Engine)    － 用來查詢及操作渲染引擎的介面

渲染引擎    (Rendering Engine)  － 用來顯示請求的內容，例如，如果請求內容為html，它負責解析html及css，並將解析後的結果顯示出來

網路        (Networking)        － 用來完成網路調用，例如http請求，它具有平臺無關的介面，可以在不同平臺上工作

JS解釋器    (JS Interpreter)    － 用來解釋執行JS代碼

UI後端      (UI Backend)        － 用來繪製類似組合選擇框及對話框等基本組件，具有不特定於某個平臺的通用介面，底層使用操作系統的用戶介面

數據存儲    (DB Persistence)    － 屬於持久層，瀏覽器需要在硬碟中保存類似cookie的各種數據，HTML5定義了web database技術，這是一種輕量級完整的客戶端存儲技術

1.多進程的瀏覽器

瀏覽器是多進程的，有一個主控進程，以及每一個tab頁面都會新開一個進程（某些情況下多個tab會合併進程）

進程可能包括主控進程，插件進程，GPU，tab頁（瀏覽器內核）等等

Browser進程：瀏覽器的主進程（負責協調、主控），只有一個
第三方插件進程：每種類型的插件對應一個進程，僅當使用該插件時才創建
GPU進程：最多一個，用於3D繪製
瀏覽器渲染進程（內核）：預設每個Tab頁面一個進程，互不影響，控制頁面渲染，腳本執行，事件處理等（有時候會優化，如多個空白tab會合併成一個進程）

2.多線程的瀏覽器內核

每一個tab頁面可以看作是瀏覽器內核進程，然後這個進程是多線程的，它有幾大類子線程：

GUI線程
JS引擎線程
事件觸發線程
定時器線程
網路請求線程

3.瀏覽器內核拿到內容後，渲染步驟大致可以分為以下幾步：

1. 解析HTML，構建DOM樹

2. 解析CSS，生成CSS規則樹

3. 合併DOM樹和CSS規則，生成render樹

4. 佈局render樹（Layout/reflow），負責各元素尺寸、位置的計算

5. 繪製render樹（paint），繪製頁面像素信息

（1） HTML解析，構建DOM

簡單的理解，這一步的流程是這樣的：瀏覽器解析HTML，構建DOM樹。解析HTML到構建出DOM當然過程可以簡述如下：

Bytes → characters → tokens → nodes → DOM

1. Conversion轉換：瀏覽器將獲得的HTML內容（Bytes）基於他的編碼轉換為單個字元

2. Tokenizing分詞：瀏覽器按照HTML規範標准將這些字元轉換為不同的標記token。每個token都有自己獨特的含義以及規則集

3. Lexing詞法分析：分詞的結果是得到一堆的token，此時把他們轉換為對象，這些對象分別定義他們的屬性和規則

4. DOM構建：因為HTML標記定義的就是不同標簽之間的關係，這個關係就像是一個樹形結構一樣
例如：body對象的父節點就是HTML對象，然後段略p對象的父節點就是body對象

（2）解析CSS，生成CSS規則樹

同理，CSS規則樹的生成也是類似。

Bytes → characters → tokens → nodes → CSSOM

（3）合併DOM樹和CSS規則，生成render樹

當DOM樹和CSSOM都有了後，就要開始構建渲染樹了

一般來說，渲染樹和DOM樹相對應的，但不是嚴格意義上的一一對應,因為有一些不可見的DOM元素不會插入到渲染樹中，如head這種不可見的標簽或者display: none等

（4）佈局render樹（Layout/Reflow），負責各元素尺寸、位置的計算

佈局：通過渲染樹中渲染對象的信息，計算出每一個渲染對象的位置和尺寸。

（5）繪製render樹（Paint），繪製頁面像素信息

繪製階段，系統會遍歷呈現樹，並調用呈現器的“paint”方法，將呈現器的內容顯示在屏幕上。

這張圖片中重要的四個步驟
1. 計算CSS樣式

2. 構建渲染樹

3. 佈局，主要定位坐標和大小，是否換行，各種position overflow z-index屬性

4. 繪製，將圖像繪製出來

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

七、斷開連接

當數據傳送完畢，需要斷開 tcp 連接，此時發起 tcp 四次揮手。

發起方向被動方發送報文，Fin、Ack、Seq，表示已經沒有數據傳輸了。併進入 FIN_WAIT_1 狀態。(第一次揮手：由瀏覽器發起的，發送給伺服器，我請求報文發送完了，你準備關閉吧)
被動方發送報文，Ack、Seq，表示同意關閉請求。此時主機發起方進入 FIN_WAIT_2 狀態。 (第二次揮手：由伺服器發起的，告訴瀏覽器，我請求報文接受完了，我準備關閉了，你也準備吧)
被動方向發起方發送報文段，Fin、Ack、Seq，請求關閉連接。併進入 LAST_ACK 狀態。 (第三次揮手：由伺服器發起，告訴瀏覽器，我響應報文發送完了，你準備關閉吧)
發起方向被動方發送報文段，Ack、Seq。然後進入等待 TIME_WAIT 狀態。被動方收到發起方的報文段以後關閉連接。發起方等待一定時間未收到回覆，則正常關閉。 (第四次揮手：由瀏覽器發起，告訴伺服器，我響應報文接受完了，我準備關閉了，你也準備吧)