浏覽器輸入一個url到頁面顯示發生了什麼？

URL解析

首先浏覽器會對Url進行解析，這過程中，保留字元（保留字元指& = + $ , / ?等不被轉換就會造成url有歧義的字元）會被進行轉義（encodeURIComponent：是範圍更廣的轉義api，能夠将保留字元轉義為UTF-8的字元）

根據dns進行ip查找

• 例如輸入的是www.baidu.com,系統會先去hosts檢視相應記錄傳回對應ip值（作業系統的hosts檔案可配置域名對應ip，例如配置github的ip可加速通路giehub）
• 如果在上一步沒找到，會查找本地的dns解析緩存，否則繼續向上查找
• 查找本地dns伺服器

• 查找根dns域名伺服器、傳回。com域伺服器位址，。com域伺服器會告訴本地伺服器域名解析伺服器的位址，最後查詢到真正的ip位址後傳回使用者，并緩存ip

  前端可使用dns預解析加快dns解析的速度

// 打開和關閉DNS預讀取
<meta http-equiv="x-dns-prefetch-control" content="off">
// 強制查詢特定主機名
<link rel="dns-prefetch" href="//hm.baidu.com">
           

http請求

HTTP和HTTPS的簡單了解

http是基于tcp/ip協定的超文本傳輸協定，在這個 過程中會經曆tcp的三次握手

• 第一次握手：用戶端發送syn包(syn=j)到伺服器，并進入SYN_SEND狀态，等待伺服器确認；
• 第二次握手：伺服器收到syn包，必須确認客戶的SYN（ack=j+1），同時自己也發送一個SYN包（syn=k），即SYN+ACK包，此時伺服器進入SYN_RECV狀态；

• 第三次握手：用戶端收到伺服器的SYN＋ACK包，向伺服器發送确認包ACK(ack=k+1)，此包發送完畢，用戶端和伺服器進入ESTABLISHED狀态，完成三次握手。

  到達web伺服器。

這其中路過了應用層、傳輸層、網絡層、資料鍊路層和實體層（七層網絡模型）

緩存

如果之前已經請求過的url浏覽器會檢視是否命中強制緩存，如果沒有與浏覽器進行協商緩存，以此來減少網絡帶寬消耗、降低伺服器壓力、減少延遲，加快打開頁面

關閉tcp連結

執行tcp的四次揮手完成傳輸任務

解析html

浏覽器需要解析html檔案才能生成頁面

• 從上到下根據HTML檔案建構DOM樹
• 建構CSSOM(CSS Object Model)樹：加載解析樣式
• 合并DOM樹和CSSOM樹，生成渲染樹（去除不顯示的節點：去除head、display為none的節點）
• 解析css的同時會繼續解析HTML檔案，但是遇到js腳本時，會阻塞後續的解析，是以一般将script标簽放在dom節點的後面
• 浏覽器布局渲染浏覽器重繪和重排

這就是一個大概的過程，還有不重複的部分歡迎指正，我也會不斷補充