先上張簡(jiǎn)單分析的圖：

思維導(dǎo)圖

1. DNS 域名解析

• 第一步，瀏覽器會(huì)檢查緩存中有沒(méi)有這個(gè)域名對(duì)應(yīng)的解析過(guò)的 IP 地址，如果有，解析結(jié)束。
  瀏覽器中的緩存有時(shí)間空間限制。
• 查找操作系統(tǒng)的緩存中是否有這個(gè)域名對(duì)應(yīng)的 DNS 解析結(jié)果。
  在 Windows 系統(tǒng)中通過(guò) C:\Windows\System32\drivers\etc\hosts 文件可以將域名解析到任何能夠訪問(wèn)的 IP 地址，瀏覽器會(huì)首先使用這個(gè)地址。Linux 中這個(gè)配置文件是 /etc/named.conf。
  緩存時(shí)間同樣受域名失效時(shí)間與緩存空間大小限制。
• 如果以上還沒(méi)解析結(jié)束，操作系統(tǒng)會(huì)把域名發(fā)送到 LDNS ( Local DNS Server )，即本地區(qū)的域名服務(wù)器。
  到這里已經(jīng)可以解決 80% 的請(qǐng)求了。
• 如果 LDNS 還沒(méi)有，直接到 Root Server 域名服務(wù)器請(qǐng)求解析。
• 根域名服務(wù)器返回給本地域名服務(wù)器一個(gè)所查詢的主域名服務(wù)器( gTDL Server )地址。gTDL 是國(guó)際頂級(jí)域名服務(wù)器，如 .com、.cn 等。
• 本地域名服務(wù)器再向主域名服務(wù)器發(fā)送請(qǐng)求。
• 接受請(qǐng)求的主域名服務(wù)器查找并返回此域名對(duì)應(yīng)的 Name Server 域名服務(wù)器地址，它是注冊(cè)的域名服務(wù)器，如域名提供商的服務(wù)器。
• Name Server 域名服務(wù)器查詢存儲(chǔ)的域名與 IP 的映射關(guān)系表，得到 IP 與 TTL值（TTL 值是控制返回時(shí)間的）。

2.建立TCP連接

TCP三次握手

1. 第一次握手：建立連接?？蛻舳税l(fā)送 SYN 包到服務(wù)器，Sequence Number 為 x，進(jìn)入 SYN_SENT 狀態(tài)，等待服務(wù)器確認(rèn)。
2. 第二次握手：服務(wù)器收到 SYN 包，對(duì)這個(gè)報(bào)文進(jìn)行確認(rèn)，設(shè)置 Acknowledgment Number 為 Sequence Number + 1；同時(shí)自己也要發(fā)送 SYN 包，Sequence Number 為 y；服務(wù)器將這些所有信息放入 SYN + ACK 包中發(fā)送給客戶發(fā)，服務(wù)器進(jìn)入 SYN_RCVD 狀態(tài)。
3. 第三次握手：客戶端收到 SYN + ACK 包。將 Acknowledgment Number 設(shè)為 y + 1，即服務(wù)器發(fā)來(lái)的 Sequence Number + 1，并向服務(wù)器發(fā)送 ACK 包，發(fā)送完成后客戶端和服務(wù)器都進(jìn)入 ESTABLISHED 狀態(tài)。

TCP三次握手與四次揮手

3. 發(fā)起 HTTP 請(qǐng)求

請(qǐng)求方法

下面只列舉了 HTTP/1.1 支持的方法。

請(qǐng)求報(bào)文

請(qǐng)求報(bào)文

4. 接收響應(yīng)結(jié)果

狀態(tài)碼

狀態(tài)碼的類別

具體狀態(tài)

• 2XX
  • 200 OK
    表示從客戶端發(fā)來(lái)的請(qǐng)求在服務(wù)器端被正常處理了
  • 204 No Content
    服務(wù)器接收的請(qǐng)求已成功處理，但在返回的響應(yīng)報(bào)文中不含實(shí)體的主體部分
  • 206 Partial Content
    客戶端進(jìn)行了范圍請(qǐng)求，而服務(wù)器成功執(zhí)行了這部分的請(qǐng)求。響應(yīng)報(bào)文中包含 Content-Range 指定范圍請(qǐng)求的實(shí)體內(nèi)容。

• 3XX

  • 301 Move Permanently
    永久重定向。表示該資源已經(jīng)分配了新的 URI，以后應(yīng)使用資源現(xiàn)在的 URI。
  • 302 Found
    臨時(shí)重定向。表示該資源已經(jīng)分配了新的 URI，希望用戶本次能使用新的 URI 訪問(wèn)。
    與 301 不同的是，302 已經(jīng)移動(dòng)的資源對(duì)應(yīng)的 URI 將來(lái)還有可能改變。
  • 303 See Other
    由于請(qǐng)求對(duì)應(yīng)的資源存在另一個(gè) URI，應(yīng)使用 GET 定向獲取請(qǐng)求的資源。
  • 304 Not Modified
    它與重定向沒(méi)有關(guān)系。
    服務(wù)器資源未改變，可直接使用客戶端未過(guò)期的緩存。304返回時(shí)，不包含任何主體部分。

• 4XX

  • 400 Bad Request
    請(qǐng)求報(bào)文中存在語(yǔ)法錯(cuò)誤。

  • 401 Unauthorized
    需要有通過(guò) HTTP 認(rèn)證的認(rèn)證信息

  • 403 Forbidden
    對(duì)請(qǐng)求資源的訪問(wèn)被服務(wù)器拒絕了

  • 404 Not Found
    無(wú)法找到請(qǐng)求的資源

• 5XX

  • 500 Internal Server Error
    服務(wù)器端在執(zhí)行請(qǐng)求時(shí)發(fā)生了錯(cuò)誤
  • 503 Service Unavailable
    服務(wù)器暫時(shí)處于超負(fù)載狀態(tài)或正在維護(hù)

響應(yīng)報(bào)文

響應(yīng)報(bào)文

5. 瀏覽器解析 HTML

渲染引擎開(kāi)始解析 HTML / SVG / XHTML，并將標(biāo)簽轉(zhuǎn)化為內(nèi)容樹(shù)中的 DOM 節(jié)點(diǎn)，產(chǎn)生 DOM Tree。接著，它解析 CSS 文件以及標(biāo)簽中的 style 樣式信息，形成 CSSOM 樹(shù)。DOM 樹(shù)與 CSSOM 樹(shù)共同構(gòu)成 Render Tree，即渲染樹(shù)。

6. 瀏覽器布局渲染

渲染的流程：

• 計(jì)算 CSS 樣式
• 構(gòu)建 Render Tree
• Layout 布局
• 繪制

Reflow / Layout：發(fā)生在元素尺寸改變時(shí)，或者將 display 由 block 變?yōu)?none 時(shí)。

Repaint：屏幕的一部分要重繪時(shí)，如某個(gè)元素背景色的變化。

注：Reflow 的成本比 Repaint 的成本大很多。

值得注意的是，這個(gè) 5、6 是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹(shù)。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過(guò)網(wǎng)絡(luò)下載其余內(nèi)容。

參考資料

• 瀏覽器中輸入url后發(fā)生了什么
• TCP3次握手連接協(xié)議和4次握手?jǐn)嚅_(kāi)連接協(xié)議
• How browsers work