從輸入URL到頁面打開

1.輸入URL並敲下回車鍵
2.瀏覽器查找當前URL是否存在緩存，並比較是否過時。
3.DNS解析域名

• 瀏覽器緩存解析
• 本地hosts文件解析
• 操做系統解析
• 路由器解析
• 根域名服務器解析、頂級域名服務器解析、主域名服務器解析（IPV4\IPV6）

IPV4: 十進制，0.0.0.0 , 13臺頂級域名服務器
IPV6: 十六進制，X:X:X:X:X:X:X:X, 25臺頂級域名服務器

4.TCP連接創建（3次握手）

• 客戶端發送SYN包（SYN = 1, seq = x）至服務端，並處於SYN_SENT狀態，等待服務器確認
• 服務端解析SYN，併發送SYN + ACK（SYN = 1, ACK = x + 1, seq = y） 包至客戶端，並處於SYN_RECV狀態，容許創建連接（告知服務器已作好準備，能夠發送數據）
• 客戶端獲取SYN + ACK 併發送ACK（ACK = y + 1， seq = z）包至服務端，連接創建成功。（即將開始發送數據）

5.客戶端發起HTTP請求

• 完整的HTTP請求包含請求起始行，請求頭部，請求主體
• 服務端收到瀏覽器的HTTP請求後，會將收到的HTTP報文封裝成HTTP的Request對象，並經過不一樣的WEB服務器進行處理，處理完的結果以Response對象返回，主要包括狀態碼，響應頭，響應報文三個部分
• 綜合起來，完整的HTTP報文包括了：通用頭部，請求/響應 頭部，請求/響應體

//General
Request Url: 服務器地址
Request Method: 請求方式（get, post, options, put, head, delete, connect, trace）
Status Code: 請求返回的狀態碼
Remote Address: 請求的遠程服務器地址（IP）
Referrer Policy: （引用策略）用來監管哪些訪問來源信息【not IE】

// Request Head
Accept: 接受類型，瀏覽器支持的MIME類型（對標服務端放回的Content-Type）
Accept-Encoding: 瀏覽器支持的壓縮類型，如gzip等，超出類型不能接受
Content-Type: 客戶端發送出去的實體內容的類型
Cache-Control: 指定請求和響應遵循的緩存機制，如no-cache,no-store
If-Modified-Since: 對應服務端你的Last-Modified, 用來匹配文件是否變更，只能精確到1s以內，http1.0中
Expires: 緩存到期時間，（服務端時間）http1.0中
Max-age: 表明資源在本地緩存多少秒， http 1.1中
If-None-Match: 對應的服務端的ETag，用來匹配文件內容是否改變（很是精確），http1.1中
Cookie: 有cookie而且同域訪問會自動帶上
Connection: 當瀏覽器與服務器通訊時對於長連接如何進行處理，如keep-alive;
Host: 請求的服務器URL
Origin: 最初的請求是從哪裏發起的（只會精確到端口）,origin比Referrer更尊重隱私
Referrer: 該頁面的來源URL（適用於全部類型的請求，會精確到詳細頁面地址，CSRF攔截經常使用到這個字段）
User-Agent: 用戶客戶端的一些必要信息，如UA頭部等;


// Response Head
Access-Control-Allow-Headers: 服務端容許的請求的headers
Access-Control-Allow-Methods: 服務端容許的請求方法
Access-Control-Allow-Origin: 服務端容許的Origin頭部
Content-Type: 服務端返回的實體內容的類型
Date: 數據從服務端發送的時間
Cache-Control: 告訴瀏覽器或其餘客戶，什麼環境能夠安全的緩存文檔
Last-Modified: 請求的資源最後修改時間
Expires: 文檔何時過時，從而再也不緩存
Max-age: 客戶端的本地資源應該緩存多少秒，開啓Cache-Control後有效
ETag: 請求變量的實體標籤的當前值
Set-Cookie: 設置和頁面關聯的cookie,服務器經過這個頭部把cookie傳給客戶端
keep-alive: 若是客戶端有keep-alive, 服務端也會有相應（如timeout = 38）
Server: 服務器的一些相關信息
複製代碼

6.瀏覽器解析渲染頁面

• 解析HTML，構建DOM樹（深度優先：即先構建當前節點的全部的子節點，再構建兄弟節點）；

若在此過程遇到script標籤，則會暫停DOM樹的構建。

• 解析CSS，生成CSS規則樹；

解析CSS規則的過程時JS將暫停執行，直到CSS規則樹構建完成。

• 合併DOM樹和CSS規則，生成render樹；

精簡CSS可加快CSS樹的構建，從而加快頁面響應速度。

• 佈局render樹（layout/reflow【迴流\重排】），負責各元素尺寸、位置計算；

迴流：因爲DOM屬性的改變（節點尺寸發生了變化，瀏覽器中受影響的部分失效），致使從新構建render樹的過程；（迴流一定致使重繪。） 重繪：一個元素的外觀發生改變，瀏覽器會根據元素的新屬性從新繪製，使元素呈現新的外觀（background, color, border-color ...）

• 繪製render樹（paint），繪製頁面像素信息；
• 瀏覽器將各層的信息發送給GPU，GPU將各層合成，顯示在屏幕上；

7.TCP連接釋放（4次揮手）

• TCP向服務端發送帶有FIN（FINISH）標記報文，客戶端進入FIN_WAIT_1狀態（通知服務器端準備關閉）
• 服務端接受通知，向客戶端發送ACK報文，確認序號爲收到的序號加1，和SYN同樣，一個FIN報文將佔用一個序號。（告訴瀏覽器，請求報文接受完畢。我準備關閉了，你也準備吧）服務器進入CLOSE_WAIT狀態。
• 服務器端發送FIN，用來關閉服務器到客戶端的數據傳輸，服務器進入LAST_ACK狀態。（告訴瀏覽器，響應報文發送完畢。你準備關閉吧。）
• 客戶端接受FIN報文，服務器進入TIME_WAIT狀態，發送ACK包給服務器（ACK = b + 1, seq = a + 1）,服務器進入CLOSED狀態。（告訴服務器響應報文接受完畢，準備關閉。）