1. 瀏覽器查找當前URL是否存在緩存，并比較緩存是否過期。
2. DNS解析URL對應(yīng)的IP。
3. 根據(jù)IP建立TCP連接（三次握手）
4. HTTP發(fā)起請求
5. 服務(wù)器處理請求，瀏覽器接收HTTP響應(yīng)。
6. 渲染頁面，構(gòu)建DOM樹。
7. 關(guān)閉TCP連接（四次揮手）。

一、緩存

通常瀏覽器緩存策略分為兩種：強緩存和協(xié)商緩存。

強緩存

實現(xiàn)強緩存可以通過兩種響應(yīng)頭實現(xiàn)Expires和Cache-Control

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires 是 HTTP / 1.0 的產(chǎn)物，表示資源會在 Wed, 22 Oct 2018 08:41:00 GMT后過期，需要再次請求。并且 Expires 受限于本地時間，如果修改了本地時間，可能會造成緩存失效。

Cache-control: max-age=30

Cache-Control 出現(xiàn)于 HTTP / 1.1，優(yōu)先級高于 Expires 。該屬性表示資源會在 30 秒后過期，需要再次請求。

協(xié)商緩存

協(xié)商緩存需要客戶端和服務(wù)端共同實現(xiàn)，需要http請求，如果緩存有效會返回 304。

1. Last-Modified 和 If-Modified-Since

Last-Modified 表示本地文件最后修改日期，If-Modified-Since 會將 Last-Modified 的值發(fā)送給服務(wù)器，詢問服務(wù)器在該日期后資源是否有更新，有更新的話就會將新的資源發(fā)送回來。
但是如果在本地打開緩存文件，就會造成 Last-Modified 被修改，所以在 HTTP / 1.1 出現(xiàn)了 ETag 。

2. ETag 和 If-None-Match

ETag 資源的實體標識（哈希字符串），If-None-Match 會將當前 ETag 發(fā)送給服務(wù)器，詢問該資源 ETag 是否變動，有變動的話就將新的資源發(fā)送回來。并且 ETag 優(yōu)先級比 Last-Modified 高。

緩存流程圖

二、DNS解析

DNS 的作用就是通過域名查詢到具體的 IP。

1. 首先瀏覽器先檢查本地hosts文件是否有這個網(wǎng)址映射關(guān)系，如果有就調(diào)用這個IP地址映射，完成域名解析。
2. 如果沒找到則會查找本地DNS解析器緩存，如果查找到則返回。
3. 如果還是沒有找到則會查找本地DNS服務(wù)器，如果查找到則返回。
4. 最后迭代查詢 按根域服務(wù)器 => 頂級域，.cn => 一級域名，hb.cn => 二級域名，www.hb.cn 的順序找到IP地址。
   迭代查詢

還有種是遞歸查詢，區(qū)別就是前者是由客戶端去做請求，后者是由系統(tǒng)配置的 DNS 服務(wù)器做請求，得到結(jié)果后將數(shù)據(jù)返回給客戶端。
遞歸查詢，按上一級DNS服務(wù)器->上上級->....逐級向上查詢找到IP地址

遞歸查詢

三、TCP連接

在通過第一步的DNS域名解析后，獲取到了服務(wù)器的IP地址，在獲取到IP地址后，便會開始建立一次連接，這是由TCP協(xié)議完成的，主要通過三次握手進行連接。
　　第一次握手： 客戶端向服務(wù)端發(fā)送連接請求報文段，該報文段中包含自身的數(shù)據(jù)通訊初始序號，請求發(fā)送后客戶端便進入SYN_SENT狀態(tài)，等待服務(wù)器確認；
　　第二次握手： 服務(wù)器收到連接請求報文段后，如果同意連接，則會發(fā)送一個應(yīng)答，該應(yīng)答中也會包含自身的數(shù)據(jù)通訊初始序號，發(fā)送完成后便進入到SYN_RECEIVED狀態(tài)；
　　第三次握手： 客戶端收到服務(wù)器的連接同意后，還要向服務(wù)端發(fā)送一個確認報文，客戶端發(fā)送完這個報文段后便進入到ESTABLISHED狀態(tài)，服務(wù)端收到這個應(yīng)答以后也進入到ESTABLISHED狀態(tài)，此時連接建立成功。

TCP連接三次握手

四、瀏覽器向服務(wù)器發(fā)送HTTP請求

HTTP請求格式由四部分組成，分別是請求行、請求頭、空行、消息體，每部分內(nèi)容占一行。
請求行：由三部分組成：分別是請求方法（GET/POST/DELETE/PUT/HEAD）、URI路徑、HTTP版本號。
請求頭：緩存相關(guān)信息（Cache-Control，If-Modified-Since）、客戶端身份信息（User-Agent）、是否支持gzip壓縮，等鍵值對信息。
空行。
主體：客戶端發(fā)給服務(wù)端的請求數(shù)據(jù)，這部分數(shù)據(jù)并不是每個請求必須的。

http請求部分信息

五、瀏覽器接收響應(yīng)

服務(wù)器在收到瀏覽器發(fā)送的HTTP請求之后，會將收到的HTTP報文封裝成HTTP的Request對象，并通過不同的Web服務(wù)器進行處理，處理完的結(jié)果以HTTP的Response對象返回，主要包括狀態(tài)碼，響應(yīng)頭，響應(yīng)報文三個部分。
狀態(tài)碼主要包括以下部分:
　1xx：指示信息–表示請求已接收，繼續(xù)處理。
　2xx：成功–表示請求已被成功接收、理解、接受。
　3xx：重定向–要完成請求必須進行更進一步的操作。
　4xx：客戶端錯誤–請求有語法錯誤或請求無法實現(xiàn)。
　5xx：服務(wù)器端錯誤–服務(wù)器未能實現(xiàn)合法的請求。
響應(yīng)頭主要由Cache-Control、 Connection、Date、Pragma等組成。
響應(yīng)體為服務(wù)器返回給瀏覽器的信息，主要由HTML，css，js，圖片文件組成。

image.png

六、渲染頁面，構(gòu)建DOM樹

如果響應(yīng)的內(nèi)容是HTML文檔的話，就需要瀏覽器進行解析渲染呈現(xiàn)給用戶。整個過程涉及兩個方面：解析和渲染。

1. 處理 HTML 并構(gòu)建 DOM 樹。
2. 處理 CSS 構(gòu)建 CSSOM 樹。
3. 將 DOM 與 CSSOM 合并成一個渲染樹。
4. 根據(jù)渲染樹來布局，計算每個節(jié)點的位置。
5. 調(diào)用 GPU 繪制，合成圖層，顯示在屏幕上。

在構(gòu)建 CSSOM 樹時，會阻塞渲染，直至 CSSOM 樹構(gòu)建完成。并且構(gòu)建 CSSOM 樹是一個十分消耗性能的過程，所以應(yīng)該盡量保證層級扁平，減少過度層疊，越是具體的 CSS 選擇器，執(zhí)行速度越慢。

當 HTML 解析到 script 標簽時，會暫停構(gòu)建 DOM，完成后才會從暫停的地方重新開始。也就是說，如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載 JS 文件。并且 CSS 也會影響 JS 的執(zhí)行，只有當解析完樣式表才會執(zhí)行 JS，所以也可以認為這種情況下，CSS 也會暫停構(gòu)建 DOM。

image.png

在收到 CSS 文件后會對已經(jīng)渲染的頁面重新渲染，加入它們應(yīng)有的樣式，圖片文件加載完立刻顯示在相應(yīng)位置。在這一過程中可能會觸發(fā)頁面的重繪或重排。

七、關(guān)閉TCP連接或繼續(xù)保持連接

斷開連接四次揮手