[[401931]]

本文轉載自微信公眾號「JS每日一題」，作者灰灰。轉載本文請聯系JS每日一題公眾號。

 一、簡單分析

簡單的分析，從輸入 URL到回車后發生的行為如下：

• URL解析
• DNS 查詢
• TCP 連接
• HTTP 請求
• 響應請求
• 頁面渲染

二、詳細分析

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