從URL輸入到頁面展示到底發生什麼？

從開發&運維角度方面來看，整體來講分爲如下幾個過程：

• DNS 解析:將域名解析成 IP 地址
• TCP 鏈接：TCP 三次握手
• 發送 HTTP 請求
• 服務器處理請求並返回 HTTP 報文
• 瀏覽器解析渲染頁面
• 斷開鏈接：TCP 四次揮手

1、什麼是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值，通常用來定位到某個位置
複製代碼

2、DNS域名解析

在瀏覽器輸入網址後，首先要通過域名解析，由於瀏覽器並不能直接經過域名找到對應的服務器，而是要經過 IP 地址。

1. IP 地址

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

2. 什麼是域名解析

DNS 協議提供經過域名查找 IP 地址，或逆向從 IP 地址反查域名的服務。
DNS 是一個網絡服務器，咱們的域名解析簡單來講就是在 DNS 上記錄一條信息記錄。
複製代碼

3. 瀏覽器如何經過域名去查詢 URL 對應的 IP 呢？

DNS域名解析分爲遞歸查詢和迭代查詢兩種方式，現通常爲迭代查詢。
複製代碼

DNS的優化與應用

1. DNS緩存 DNS存在着多級緩存，從離瀏覽器的距離排序的話，有如下幾種: 瀏覽器緩存，系統緩存，路由器緩存，IPS服務器緩存，根域名服務器緩存，頂級域名服務器緩存，主域名服務器緩存。

2. DNS負載均衡(DNS重定向) DNS負載均衡技術的實現原理是在DNS服務器中爲同一個主機名配置多個IP地址，在應答DNS查詢時， DNS服務器對每一個查詢將以DNS文件中主機記錄的IP地址按順序返回不一樣的解析結果，將客戶端的訪問 引導到不一樣的機器上去，使得不一樣的客戶端訪問不一樣的服務器，從而達到負載均衡的目的。

• 你們耳熟能詳的CDN(Content Delivery Network)就是利用DNS的重定向技術，DNS服務器會返回一個跟 用戶最接近的點的IP地址給用戶，CDN節點的服務器負責響應用戶的請求，提供所需的內容。

3. dns-prefetch DNS Prefetch 是一種 DNS 預解析技術。當你瀏覽網頁時，瀏覽器會在加載網頁時對網頁中的域名進行解析緩存，這樣在你單擊當前網頁中的鏈接時就無需進行 DNS 的解析，減小用戶等待時間，提升用戶體驗。

OSI參考模型與TCP/IP四層模型

3、TCP三次握手

• 客戶端發送一個帶 SYN=1，Seq=X 的數據包到服務器端口（第一次握手，由瀏覽器發起，告訴服務器我要發送請求了）

• 服務器發回一個帶 SYN=1， ACK=X+1， Seq=Y 的響應包以示傳達確認信息（第二次握手，由服務器發起，告訴瀏覽器我準備接受了，你趕忙發送吧）

• 客戶端再回傳一個帶 ACK=Y+1， Seq=Z 的數據包，表明「握手結束」（第三次握手，由瀏覽器發送，告訴服務器，我立刻就發了，準備接受吧）

4、發送 HTTP 請求

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

爲避免篇幅過長，http協議、緩存等相關內容請參閱： 從HTTP到WEB緩存

5、服務器處理請求並返回 HTTP 報文

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

僞裝我是一個傳統的MVC模型，RD同窗請無視

6、瀏覽器解析渲染頁面

瀏覽器的主要構成

用戶界面    (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頁面能夠看做是瀏覽器內核進程，而後這個進程是多線程的，它有幾大類子線程：

1. GUI線程
2. JS引擎線程
3. 事件觸發線程
4. 定時器線程
5. 網絡請求線程

瀏覽器內核拿到內容後，渲染步驟大體能夠分爲如下幾步：

1. 解析HTML，構建DOM樹

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

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

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

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

以webkit內核爲例

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，即重繪。意味着元素髮生的改變只是影響了元素的一些外觀之類的時候（例如，背景色，邊框顏色，文字顏色等），此時只須要應用新樣式繪製這個元素就能夠了

7、斷開鏈接

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

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

參考文章：

• 從輸入URL到頁面加載的過程
• TCP/IP協議
• TCP的三次握手與四次分手
• MDN Web Docs