細說瀏覽器輸入URL後發生了什麼

時間 2020-04-09

標籤細說瀏覽器輸入 url 發生了什麼欄目瀏覽器简体版

原文原文鏈接

整體概覽

大致上，能夠分爲六步，固然每一步均可以詳細都展開來講，這裏先放一張總覽圖: html

DNS域名解析

在網絡世界，你確定記得住網站的名稱，可是很難記住網站的 IP 地址，於是也須要一個地址簿，就是 DNS 服務器。DNS 服務器是高可用、高併發和分佈式的，它是樹狀結構，如圖：前端

根 DNS 服務器：返回頂級域 DNS 服務器的 IP 地址
頂級域 DNS 服務器：返回權威 DNS 服務器的 IP 地址
權威 DNS 服務器：返回相應主機的 IP 地址

DNS的域名查找，在客戶端和瀏覽器，本地DNS之間的查詢方式是遞歸查詢；在本地DNS服務器與根域及其子域之間的查詢方式是迭代查詢；git

遞歸過程： github

在客戶端輸入 URL 後，會有一個遞歸查找的過程，從瀏覽器緩存中查找->本地的hosts文件查找->找本地DNS解析器緩存查找->本地DNS服務器查找，這個過程當中任何一步找到了都會結束查找流程。面試

若是本地DNS服務器沒法查詢到，則根據本地DNS服務器設置的轉發器進行查詢。若未用轉發模式，則迭代查找過程以下圖： segmentfault

結合起來的過程，能夠用一個圖表示：瀏覽器

在查找過程當中，有如下優化點：

DNS存在着多級緩存，從離瀏覽器的距離排序的話，有如下幾種: 瀏覽器緩存，系統緩存，路由器緩存，IPS服務器緩存，根域名服務器緩存，頂級域名服務器緩存，主域名服務器緩存。
在域名和 IP 的映射過程當中，給了應用基於域名作負載均衡的機會，能夠是簡單的負載均衡，也能夠根據地址和運營商作全局的負載均衡。

創建TCP鏈接

首先，判斷是否是https的，若是是，則HTTPS實際上是HTTP + SSL / TLS 兩部分組成，也就是在HTTP上又加了一層處理加密信息的模塊。服務端和客戶端的信息傳輸都會經過TLS進行加密，因此傳輸的數據都是加密後的數據。緩存

進行三次握手，創建TCP鏈接。安全

第一次握手：創建鏈接。客戶端發送鏈接請求報文段，將SYN位置爲1，Sequence Number爲x；而後，客戶端進入SYN_SEND狀態，等待服務器的確認；服務器
第二次握手：服務器收到SYN報文段。服務器收到客戶端的SYN報文段，須要對這個SYN報文段進行確認，設置Acknowledgment Number爲x+1(Sequence Number+1)；同時，本身還要發送SYN請求信息，將SYN位置爲1，Sequence Number爲y；服務器端將上述全部信息放到一個報文段（即SYN+ACK報文段）中，一併發送給客戶端，此時服務器進入SYN_RECV狀態；
第三次握手：客戶端收到服務器的SYN+ACK報文段。而後將Acknowledgment Number設置爲y+1，向服務器發送ACK報文段，這個報文段發送完畢之後，客戶端和服務器端都進入ESTABLISHED狀態，完成TCP三次握手。

SSL握手過程

第一階段創建安全能力包括協議版本會話Id 密碼構件壓縮方法和初始隨機數
第二階段服務器發送證書密鑰交換數據和證書請求，最後發送請求-相應階段的結束信號
第三階段若是有證書請求客戶端發送此證書以後客戶端發送密鑰交換數據也能夠發送證書驗證消息
第四階段變動密碼構件和結束握手協議

完成了以後，客戶端和服務器端就能夠開始傳送數據。更多 HTTPS 的資料能夠看這裏：

備註

ACK：此標誌表示應答域有效，就是說前面所說的TCP應答號將會包含在TCP數據包中；有兩個取值：0和1，爲1的時候表示應答域有效，反之爲0。TCP協議規定，只有ACK=1時有效，也規定鏈接創建後全部發送的報文的ACK必須爲1。

SYN(SYNchronization)：在鏈接創建時用來同步序號。當SYN=1而ACK=0時，代表這是一個鏈接請求報文。對方若贊成創建鏈接，則應在響應報文中使SYN=1和ACK=1. 所以, SYN置1就表示這是一個鏈接請求或鏈接接受報文。

FIN(finis）即完，終結的意思，用來釋放一個鏈接。當 FIN = 1 時，代表此報文段的發送方的數據已經發送完畢，並要求釋放鏈接。

發送HTTP請求，服務器處理請求，返回響應結果

TCP鏈接創建後，瀏覽器就能夠利用HTTP／HTTPS協議向服務器發送請求了。服務器接受到請求，就解析請求頭，若是頭部有緩存相關信息如if-none-match與if-modified-since，則驗證緩存是否有效，如有效則返回狀態碼爲304，若無效則從新返回資源，狀態碼爲200.

這裏有發生的一個過程是HTTP緩存，是一個常考的考點，大體過程如圖：

其過程，比較多內容，能夠參考個人這篇文章《瀏覽器相關原理(面試題)詳細總結一》，這裏我就不詳細說了～

關閉TCP鏈接

第一次分手：主機1（可使客戶端，也能夠是服務器端），設置Sequence Number和Acknowledgment Number，向主機2發送一個FIN報文段；此時，主機1進入FIN_WAIT_1狀態；這表示主機1沒有數據要發送給主機2了；
第二次分手：主機2收到了主機1發送的FIN報文段，向主機1回一個ACK報文段，Acknowledgment Number爲Sequence Number加1；主機1進入FIN_WAIT_2狀態；主機2告訴主機1，我"贊成"你的關閉請求；
第三次分手：主機2向主機1發送FIN報文段，請求關閉鏈接，同時主機2進入LAST_ACK狀態；
第四次分手：主機1收到主機2發送的FIN報文段，向主機2發送ACK報文段，而後主機1進入TIME_WAIT狀態；主機2收到主機1的ACK報文段之後，就關閉鏈接；此時，主機1等待2MSL後依然沒有收到回覆，則證實Server端已正常關閉，那好，主機1也能夠關閉鏈接了。

瀏覽器渲染

按照渲染的時間順序，流水線可分爲以下幾個子階段：構建 DOM 樹、樣式計算、佈局階段、分層、柵格化和顯示。如圖：

渲染進程將 HTML 內容轉換爲可以讀懂DOM 樹結構。
渲染引擎將 CSS 樣式錶轉化爲瀏覽器能夠理解的styleSheets，計算出 DOM 節點的樣式。
建立佈局樹，並計算元素的佈局信息。
對佈局樹進行分層，並生成分層樹。
爲每一個圖層生成繪製列表，並將其提交到合成線程。合成線程將圖層分圖塊，並柵格化將圖塊轉換成位圖。
合成線程發送繪製圖塊命令給瀏覽器進程。瀏覽器進程根據指令生成頁面，並顯示到顯示器上。

構建 DOM 樹

瀏覽器從網絡或硬盤中得到HTML字節數據後會通過一個流程將字節解析爲DOM樹,先將HTML的原始字節數據轉換爲文件指定編碼的字符,而後瀏覽器會根據HTML規範來將字符串轉換成各類令牌標籤，如html、body等。最終解析成一個樹狀的對象模型，就是dom樹。

具體步驟：

轉碼（Bytes -> Characters）—— 讀取接收到的 HTML 二進制數據，按指定編碼格式將字節轉換爲 HTML 字符串
Tokens 化（Characters -> Tokens）—— 解析 HTML，將 HTML 字符串轉換爲結構清晰的 Tokens，每一個 Token 都有特殊的含義同時有本身的一套規則
構建 Nodes（Tokens -> Nodes）—— 每一個 Node 都添加特定的屬性（或屬性訪問器），經過指針可以肯定 Node 的父、子、兄弟關係和所屬 treeScope（例如：iframe 的 treeScope 與外層頁面的 treeScope 不一樣）
構建 DOM 樹（Nodes -> DOM Tree）—— 最重要的工做是創建起每一個結點的父子兄弟關係

樣式計算

渲染引擎將 CSS 樣式錶轉化爲瀏覽器能夠理解的 styleSheets，計算出 DOM 節點的樣式。

CSS 樣式來源主要有 3 種，分別是經過 link 引用的外部 CSS 文件、style標籤內的 CSS、元素的 style 屬性內嵌的 CSS。,其樣式計算過程主要爲：

能夠看到上面的 CSS 文本中有不少屬性值，如 2em、blue、bold，這些類型數值不容易被渲染引擎理解，因此須要將全部值轉換爲渲染引擎容易理解的、標準化的計算值，這個過程就是屬性值標準化。處理完成後再處理樣式的繼承和層疊，有些文章將這個過程稱爲CSSOM的構建過程。

頁面佈局

佈局過程，即排除 script、meta 等功能化、非視覺節點，排除 display: none 的節點，計算元素的位置信息，肯定元素的位置，構建一棵只包含可見元素佈局樹。如圖：

其中，這個過程須要注意的是 迴流和重繪，關於迴流和重繪，詳細的能夠看我另外一篇文章《瀏覽器相關原理(面試題)詳細總結二》，這裏就不說了～

生成分層樹

頁面中有不少複雜的效果，如一些複雜的 3D 變換、頁面滾動，或者使用 z-indexing 作 z 軸排序等，爲了更加方便地實現這些效果，渲染引擎還須要爲特定的節點生成專用的圖層，並生成一棵對應的圖層樹（LayerTree），如圖：

若是你熟悉 PS，相信你會很容易理解圖層的概念，正是這些圖層疊加在一塊兒構成了最終的頁面圖像。在瀏覽器中，你能夠打開 Chrome 的"開發者工具"，選擇"Layers"標籤。渲染引擎給頁面分了不少圖層，這些圖層按照必定順序疊加在一塊兒，就造成了最終的頁面。

並非佈局樹的每一個節點都包含一個圖層，若是一個節點沒有對應的層，那麼這個節點就從屬於父節點的圖層。那麼須要知足什麼條件，渲染引擎纔會爲特定的節點建立新的層呢？詳細的能夠看我另外一篇文章《瀏覽器相關原理(面試題)詳細總結二》，這裏就不說了～

柵格化

合成線程會按照視口附近的圖塊來優先生成位圖，實際生成位圖的操做是由柵格化來執行的。所謂柵格化，是指將圖塊轉換爲位圖。如圖：

一般一個頁面可能很大，可是用戶只能看到其中的一部分，咱們把用戶能夠看到的這個部分叫作視口（viewport）。在有些狀況下，有的圖層能夠很大，好比有的頁面你使用滾動條要滾動很久才能滾動到底部，可是經過視口，用戶只能看到頁面的很小一部分，因此在這種狀況下，要繪製出全部圖層內容的話，就會產生太大的開銷，並且也沒有必要。