一、簡單分析 簡單的分析，從輸入 URL到回車後發生的行為如下： URL解析 DNS 查詢 TCP 連接 HTTP 請求 響應請求 頁面渲染 二、詳細分析 URL解析 首先判斷你輸入的是一個合法的URL 還是一個待搜索的關鍵詞，並且根據你輸入的內容進行對應操作 URL的解析第過程中的第一步，一個ur ...
一、簡單分析
簡單的分析，從輸入 URL到回車後發生的行為如下：
- URL解析
- DNS 查詢
- TCP 連接
- HTTP 請求
- 響應請求
- 頁面渲染
二、詳細分析
URL解析
首先判斷你輸入的是一個合法的URL 還是一個待搜索的關鍵詞，並且根據你輸入的內容進行對應操作
URL的解析第過程中的第一步，一個url的結構解析如下：
DNS查詢
在之前文章中講過DNS的查詢，這裡就不再講述了
整個查詢過程如下圖所示：
最終，獲取到了功能變數名稱對應的目標伺服器IP地址
TCP連接
在之前文章中，瞭解到tcp是一種面向有連接的傳輸層協議
在確定目標伺服器伺服器的IP地址後，則經歷三次握手建立TCP連接，流程如下：
發送 http 請求
當建立tcp連接之後，就可以在這基礎上進行通信，瀏覽器發送 http 請求到目標伺服器
請求的內容包括：
- 請求行
- 請求頭
- 請求主體
響應請求
當伺服器接收到瀏覽器的請求之後，就會進行邏輯操作，處理完成之後返回一個HTTP響應消息，包括：
- 狀態行
- 響應頭
- 響應正文
在伺服器響應之後，由於現在http預設開始長連接keep-alive，當頁面關閉之後，tcp鏈接則會經過四次揮手完成斷開
頁面渲染
當瀏覽器接收到伺服器響應的資源後，首先會對資源進行解析：
- 查看響應頭的信息，根據不同的指示做對應處理，比如重定向，存儲cookie，解壓gzip，緩存資源等等
- 查看響應頭的 Content-Type的值，根據不同的資源類型採用不同的解析方式
關於頁面的渲染過程如下：
- 解析HTML，構建 DOM 樹
- 解析 CSS ，生成 CSS 規則樹
- 合併 DOM 樹和 CSS 規則，生成 render 樹
- 佈局 render 樹（ Layout / reflow ），負責各元素尺寸、位置的計算
- 繪製 render 樹（ paint ），繪製頁面像素信息
- 瀏覽器會將各層的信息發送給 GPU，GPU 會將各層合成（ composite ），顯示在屏幕上
參考文獻
- https://github.com/febobo/web-interview/issues/141
- https://zhuanlan.zhihu.com/p/80551769
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
