摘要：緊跟在后面的是請(qǐng)求頭，每行用冒號(hào)分隔名稱和值按下兩次回車，收到服務(wù)端回復(fù)響應(yīng)部分第一行被稱作，它也分為三個(gè)部分，協(xié)議和版本狀態(tài)碼和狀態(tài)文本。對(duì)前端來(lái)說(shuō)系列的狀態(tài)碼是非常陌生的，原因是的狀態(tài)被瀏覽器庫(kù)直接處理掉了，不會(huì)讓上層應(yīng)用知曉。

重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】，如有侵權(quán)請(qǐng)聯(lián)系我，郵箱：kaimo313@foxmail.com。

1、瀏覽器首先使用 HTTP 協(xié)議或者 HTTPS 協(xié)議，向服務(wù)端請(qǐng)求頁(yè)面

2、把請(qǐng)求回來(lái)的 HTML 代碼經(jīng)過(guò)解析，構(gòu)建成 DOM 樹

3、計(jì)算 DOM 樹上的 CSS 屬性

4、最后根據(jù) CSS 屬性對(duì)元素逐個(gè)進(jìn)行渲染，得到內(nèi)存中的位圖

5、一個(gè)可選的步驟是對(duì)位圖進(jìn)行合成，這會(huì)極大地增加后續(xù)繪制的速度

6、合成之后，再繪制到界面上

winter用訪問(wèn)極客時(shí)間網(wǎng)站為例整理了一下流程

注意一點(diǎn)：從 HTTP 請(qǐng)求回來(lái)，就產(chǎn)生了流式的數(shù)據(jù)，后續(xù)的 DOM 樹構(gòu)建、CSS 計(jì)算、渲染、合成、繪制，都是盡可能地流式處理前一步的產(chǎn)出

1、HTTP 標(biāo)準(zhǔn)由 IETF 組織制定，跟它相關(guān)的標(biāo)準(zhǔn)主要有兩份：

1）、HTTP1.1：https://tools.ietf.org/html/rfc2616

2）、HTTP1.1：https://tools.ietf.org/html/rfc7234

2、TCP 協(xié)議是一條雙向的通訊通道，HTTP 在 TCP 的基礎(chǔ)上，規(guī)定了 Request-Response 的模式。這個(gè)模式?jīng)Q定了通訊必定是由瀏覽器端首先發(fā)起的。

3、HTTP 是純粹的文本協(xié)議，它是規(guī)定了使用 TCP 協(xié)議來(lái)傳輸文本格式的一個(gè)應(yīng)用層協(xié)議。

winter用一個(gè)純粹的 TCP 客戶端來(lái)手工實(shí)現(xiàn) HTTP，實(shí)驗(yàn)需要使用telnet客戶端

1、運(yùn)行 telnet，連接到極客時(shí)間主機(jī)

telnet time.geekbang.org 80

2、TCP 連接已經(jīng)建立，輸入下面字符作為請(qǐng)求（請(qǐng)求部分）

GET / HTTP/1.1
Host: time.geekbang.org

第一行被稱作 request line，它分為三個(gè)部分，HTTP Method（請(qǐng)求的方法）、請(qǐng)求的路徑、請(qǐng)求的協(xié)議和版本。

緊跟在request line后面的是請(qǐng)求頭，每行用冒號(hào)分隔名稱和值

3、按下兩次回車，收到服務(wù)端回復(fù)（響應(yīng)部分）

HTTP/1.1 301 Moved Permanently
Date: Fri, 25 Jan 2019 13:28:12 GMT
Content-Type: text/html
Content-Length: 182
Connection: keep-alive
Location: https://time.geekbang.org/
Strict-Transport-Security: max-age=15768000




301 Moved Permanently
openresty

第一行被稱作 response line，它也分為三個(gè)部分，協(xié)議和版本、狀態(tài)碼和狀態(tài)文本。

緊隨在 response line 之后，是響應(yīng)頭，每行用冒號(hào)分隔的名稱和值

類型：GET、POST、HEADPUT、DELETE、CONNECT、OPTIONS、TRACE

1、瀏覽器通過(guò)地址欄訪問(wèn)頁(yè)面都是 GET 方法

2、表單提交產(chǎn)生 POST 方法

3、PUT 和 DELETE 分別表示添加資源和刪除資源

4、CONNECT 現(xiàn)在多用于 HTTPS 和 WebSocket

5、OPTIONS 和 TRACE 一般用于調(diào)試，多數(shù)線上服務(wù)都不支持

臨時(shí)回應(yīng)，表示客戶端請(qǐng)繼續(xù)。對(duì)前端來(lái)說(shuō)1xx 系列的狀態(tài)碼是非常陌生的，原因是 1xx 的狀態(tài)被瀏覽器 http 庫(kù)直接處理掉了，不會(huì)讓上層應(yīng)用知曉。

2xx 系列的狀態(tài)最熟悉的就是 200，這通常是網(wǎng)頁(yè)請(qǐng)求成功的標(biāo)志

表示請(qǐng)求的目標(biāo)有變化，希望客戶端進(jìn)一步處理。

301&302：永久性與臨時(shí)性跳轉(zhuǎn)。

304：跟客戶端緩存沒(méi)有更新。

客戶端請(qǐng)求錯(cuò)誤。

403：無(wú)權(quán)限。

404：表示請(qǐng)求的頁(yè)面不存在。

418：It’s a teapot. 這是一個(gè)彩蛋，來(lái)自 IETF 的一個(gè)愚人節(jié)玩笑。（超文本咖啡壺控制協(xié)議）

服務(wù)端請(qǐng)求錯(cuò)誤。

500：服務(wù)端錯(cuò)誤。

503：服務(wù)端暫時(shí)性錯(cuò)誤，可以一會(huì)再試。

HTTP 請(qǐng)求的 body 主要用于提交表單場(chǎng)景。

常見的 body 格式是：

application/json

application/x-www-form-urlencoded

multipart/form-data

text/xml

1、使用 html 的 form 標(biāo)簽提交產(chǎn)生的 html 請(qǐng)求，默認(rèn)會(huì)產(chǎn)生 application/x-www-form-urlencoded 的數(shù)據(jù)格式

2、當(dāng)有文件上傳時(shí)，則會(huì)使用 multipart/form-data。

1、確定請(qǐng)求的目標(biāo)服務(wù)端身份

2、保證傳輸?shù)臄?shù)據(jù)不會(huì)被網(wǎng)絡(luò)中間節(jié)點(diǎn)竊聽或者篡改

HTTPS 的標(biāo)準(zhǔn)也是由 RFC 規(guī)定的查看詳情

HTTPS 是使用加密通道來(lái)傳輸 HTTP 的內(nèi)容。

HTTPS首先與服務(wù)端建立一條 TLS 加密通道。

TLS 構(gòu)建于 TCP 協(xié)議之上，它實(shí)際上是對(duì)傳輸?shù)膬?nèi)容做一次加密，所以從傳輸內(nèi)容上看，HTTPS 跟 HTTP 沒(méi)有任何區(qū)別。

HTTP 2 是 HTTP 1.1 的升級(jí)版本查看詳情

1、支持服務(wù)端推送：服務(wù)端推送能夠在客戶端發(fā)送第一個(gè)請(qǐng)求到服務(wù)端時(shí)，提前把一部分內(nèi)容推送給客戶端，放入緩存當(dāng)中，這可以避免客戶端請(qǐng)求順序帶來(lái)的并行度不高，從而導(dǎo)致的性能問(wèn)題。

2、支持 TCP 連接復(fù)用：TCP 連接復(fù)用，則使用同一個(gè) TCP 連接來(lái)傳輸多個(gè) HTTP 請(qǐng)求，避免了 TCP 連接建立時(shí)的三次握手開銷，和初建 TCP 連接時(shí)傳輸窗口小的問(wèn)題。

這一部分的知識(shí)對(duì)我們排查api問(wèn)題很有幫助，理解http的一些知識(shí)，能幫助我們更好的理解前后端的通訊，接下來(lái)winter會(huì)繼續(xù)講解瀏覽器是怎樣工作的后續(xù)階段。