瀏覽器從輸入 Url 到展示出頁面都經歷了哪些過程

文章寫於 2017 年,首發於微信公衆號:字節流動

輸入域名

在瀏覽器輸入網址時,瀏覽器會根據歷史記錄、書籤智能匹配補全域名或者 url 。
例如 chrome 瀏覽器,甚至會根據匹配結果直接把網頁加載出來。

解析域名

請求發起時,瀏覽器首先解析域名,一般會首先查看本地的 hosts 文件,查找相關域名與 ip 地址的對應規則,若查找到的話,就直接使用 hosts 文件裏面的 ip 地址。

若在本地 hosts 文件中,未找到目標域名與 ip 地址的對應關係,瀏覽器便會向本地 DNS 服務器發起一個 DNS 請求,本地 DNS 服務器收到請求之後,便會查詢其緩存記錄,若查詢到此記錄便直接返回結果。

若本地 DNS 服務器緩存中未查詢到相關記錄,便向 DNS 根服務器進行查詢,根 DNS 服務器沒有記錄具體的域名與 ip 地址的映射關係,而是返回域服務器的地址。

本地 DNS 繼續向域服務器發起請求,域服務器收到請求之後,返回域名解析服務器的地址。最後本地 DNS 服務器向域名解析服務器發送請求,域名解析服務器收到請求之後,返回域名與 ip 映射關係信息,然後本地 DNS 服務器將映射信息保存到其緩存中,同時也將 ip 地址返回給用戶電腦。

DNS域名系統

瀏覽器發起 http 請求

瀏覽器獲取到域名對應的 ip 地址之後,便會以一個隨機端口(1024< port < 65535)向服務端 web 程序 80 端口發起 TCP 連接請求。

瀏覽器與服務端經過 3 次 TCP 握手之後,建立 TCP 連接,然後瀏覽器發起一個 http 請求。一般的瀏覽器只能發起 GET 或者 POST 請求。

請求信格式包含四個部分:

  1. 請求行(請求方法 URI 協議/版本)
  2. 請求頭(緩存、客戶端身份信息等)
  3. 空行
  4. 消息體

http 請求格式示例:

GET /index.html HTTP/1.1
Cache-Control:max-age=0
Cookie:gsScrollPos=; _ga=GA1.2.329038035.1465891024; _gat=1
If-Modified-Since:Sun, 01 May 2016 23:59:59 GMT
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36

//消息體

PS:
常用的請求方法有 GET/POST/DELETE/PUT/HEAD 。
三次握手四次揮手示意圖

TCP 三次握手的目的是:爲了防止已經失效的連接請求報文發送到服務端,服務端因而產生不必要的響應開銷

在謝希仁著《計算機網絡》第四版中講“三次握手”的目的是“爲了防止已失效的連接請求報文段突然又傳送到了服務端,因而產生錯誤”。在另一部經典的《計算機網絡》一書中講“三次握手”的目的是爲了解決“網絡中存在延遲的重複分組”的問題。

TCP 四次揮手的目的是:爲確保收發雙方數據傳輸的完整性。

那四次分手又是爲何呢?TCP協議是一種面向連接的、可靠的、基於字節流的運輸層通信協議。TCP是全雙工模式,這就意味着,當主機1發出FIN報文段時,只是表示主機1已經沒有數據要發送了,主機1告訴主機2,它的數據已經全部發送完畢了;但是,這個時候主機1還是可以接受來自主機2的數據;當主機2返回ACK報文段時,表示它已經知道主機1沒有數據發送了,但是主機2還是可以發送數據到主機1的;當主機2也發送了FIN報文段時,這個時候就表示主機2也沒有數據要發送了,就會告訴主機1,我也沒有數據要發送了,之後彼此就會愉快的中斷這次TCP連接。如果要正確的理解四次分手的原理,就需要了解四次分手過程中的狀態變化。

服務器返回 http 響應

服務端返回 http 響應的格式包含四個部分:

  1. 響應行(狀態行)(協議/版本號 狀態碼 狀態說明)
  2. 響應頭(響應頭是服務器傳遞給客戶端用於說明服務器的一些信息,以及將來繼續訪問該資源時的策略。)
  3. 空行
  4. 消息體(響應體是服務端返回給客戶端的 HTML 文本內容,或者其他格式的數據,比如:視頻流、圖片或者音頻數據。)

http 響應格式示例:

HTTP/1.1 200 OK
Date: Sat, 31 Dec 2016 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 113

<html>
<head>
<title>Haohao</title>
</head>
<body>
Hello World!
</body>
</html>

PS:
服務器在返回響應之前可能會經過重定向、反向代理服務器請求等過程。

瀏覽器處理響應

以服務端響應消息體爲 HTML 文本爲例,瀏覽器解析 HTML 文本時,會”自上而下“加載,並在加載過程中進行解析渲染展現給用戶。在解析過程中,如果遇到請求外部資源時,如圖片、外鏈的 CSS 、 js 等,請求過程是異步的,並不會影響整個 HTML 文檔的加載。

聯繫與交流

我的公衆號

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章