深入理解HTTP協(xié)議二

在深入理解HTTP協(xié)議一中，分析了：

網(wǎng)絡(luò)體系結(jié)構(gòu)
數(shù)據(jù)傳輸過程（主要是TCP）
HTTP基本特征

在本章中主要分析：

http1.0兆解、http1.1及http2版本區(qū)別
http報(bào)文結(jié)構(gòu)

一、http1.0疾嗅、http1.1及http2版本區(qū)別

http1.0

HTTP/1.0 $\color{red}{最大的缺點(diǎn)}$ 是一次TCP請(qǐng)求只能發(fā)送一次http請(qǐng)求搓蚪，每次請(qǐng)求資源的時(shí)候都需要重新發(fā)起TCP請(qǐng)求。

http1.0

上圖是http1.0請(qǐng)求一次資源的時(shí)間過程烘豹，可以看出一次請(qǐng)求包含2個(gè)RTT,一個(gè)是TCP連接，一個(gè)http報(bào)文數(shù)據(jù))诺祸。

http1.0的持續(xù)連接連接問題可以用 $\color{red}{Connection: keep-alive}$ 實(shí)現(xiàn)

不過http1.0的keep-alive默認(rèn)是關(guān)閉的

http1.1

http1.1主要就是解決了 $\color{red}{持續(xù)連接}$ 問題携悯，即TCP連接默認(rèn)不關(guān)閉，可以被多個(gè)請(qǐng)求復(fù)用筷笨，不用聲明Connection: keep-alive.

隊(duì)頭堵塞

http1.1版允許復(fù)用TCP連接憔鬼，但是同一個(gè)TCP連接里面，所有的數(shù)據(jù)通信是按次序進(jìn)行的胃夏。服務(wù)器只有處理完一個(gè)回應(yīng)轴或，才會(huì)進(jìn)行下一個(gè)回應(yīng)。要是前面的回應(yīng)特別慢仰禀，后面就會(huì)有許多請(qǐng)求排隊(duì)等著.

Chrome有個(gè)機(jī)制照雁，對(duì)于同一個(gè)域名，默認(rèn)允許同時(shí)建立 6 個(gè) TCP持久連接悼瘾，使用持久連接時(shí)囊榜，雖然能公用一個(gè)TCP管道，但是在一個(gè)管道中同一時(shí)刻只能處理一個(gè)請(qǐng)求亥宿，在當(dāng)前的請(qǐng)求沒有結(jié)束之前卸勺，其他的請(qǐng)求只能處于阻塞狀態(tài)。另外如果在同一個(gè)域名下同時(shí)有10個(gè)請(qǐng)求發(fā)生烫扼，那么其中4個(gè)請(qǐng)求會(huì)進(jìn)入排隊(duì)等待狀態(tài)曙求，直至進(jìn)行中的請(qǐng)求完成.

http1.1

上圖是簡書的一個(gè)頁面的請(qǐng)求次數(shù)，大概是75個(gè)映企，這還是比較少的悟狱，瀏覽器只能夠同時(shí)建立 6 個(gè) TCP持久連接，那就意味著有60多個(gè)請(qǐng)求需要等待.

等待

可以看到同一時(shí)刻堰氓，只有8個(gè)請(qǐng)求在執(zhí)行挤渐。

這就是為什么我們強(qiáng)調(diào)要用Spriting合并多張小圖為一張大圖,這樣可以減少http請(qǐng)求的次數(shù)。

我們?cè)谑褂脀ebpack打包資源切分包的時(shí)候也不是說包越小越好双絮，太小只會(huì)增加http請(qǐng)求次數(shù)浴麻，從而影響性能。

頭部報(bào)文巨大

http1.1另外一個(gè)缺點(diǎn)是http頭較大（相對(duì)http2）囤攀，主要原因是http1.1的頭信息只能是文本（ASCII編碼）不能是二進(jìn)制流软免。

http2

http2主要改進(jìn)點(diǎn)：

Header的壓縮
Server Push
請(qǐng)求/響應(yīng)管線化
修復(fù)在HTTP 1.x的隊(duì)頭阻塞問題
在單個(gè)TCP連接里多工復(fù)用請(qǐng)求

詳細(xì)參考請(qǐng)深入淺出：HTTP/2

目前主流瀏覽器都支持HTTP/2，判斷網(wǎng)站是否支持http2可以通過一下代碼判斷

(function(){
    // 保證這個(gè)方法只在支持loadTimes的chrome瀏覽器下執(zhí)行
    if(window.chrome && typeof chrome.loadTimes === 'function') {
        var loadTimes = window.chrome.loadTimes();
        var spdy = loadTimes.wasFetchedViaSpdy;
        var info = loadTimes.npnNegotiatedProtocol || loadTimes.connectionInfo;
        // 就以 「h2」作為判斷標(biāo)識(shí)
        if(spdy && /^h2/i.test(info)) {
            return console.info('本站點(diǎn)使用了HTTP/2');
        }
    }
    console.warn('本站點(diǎn)沒有使用HTTP/2');
})();

測(cè)試了一下淘寶是支持http2的焚挠。官方解釋使用HTTP/2能帶來20%~60%的效率提升膏萧，所以HTTP/2也是前端性能優(yōu)化的一個(gè)方向。

二、HTTP報(bào)文結(jié)構(gòu)

我們?cè)谡{(diào)試模式下查看connect內(nèi)容榛泛，能看到基本上分為3塊蝌蹂，基本信息、請(qǐng)求header挟鸠、響應(yīng)header叉信。

http報(bào)文

HTTP是一個(gè)基于請(qǐng)求/響應(yīng)模式的、一問一答的方式實(shí)現(xiàn)服務(wù)艘希。即我們通常所說的Request/Response硼身，對(duì)應(yīng)的就是請(qǐng)求報(bào)文和響應(yīng)報(bào)文。

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

請(qǐng)求報(bào)文結(jié)構(gòu)

主要分為：

報(bào)文首部（請(qǐng)求行+請(qǐng)求頭部）
空行
報(bào)文內(nèi)容

請(qǐng)求行

請(qǐng)求行由請(qǐng)求 $\color{red}{方法字段}$ 覆享、 $\color{red}{URL字段}$ 和 $\color{red}{HTTP協(xié)議版本字段}$ 3個(gè)字段組成佳遂，它們用空格分隔。例如撒顿，GET /index.html HTTP/1.1丑罪。

常用請(qǐng)求方法有：

GET、POST凤壁、HEAD吩屹、PUT、DELETE拧抖、OPTIONS煤搜、TRACE、CONNECT

請(qǐng)求頭部

請(qǐng)求頭部一般分為：

通用首部(General Header)
請(qǐng)求首部(Request Header)
實(shí)體首部(Entity Header Fields)

請(qǐng)求頭部由關(guān)鍵字/值對(duì)組成唧席，每行一對(duì)擦盾，關(guān)鍵字和值用英文冒號(hào)“:”分隔。請(qǐng)求頭部通知服務(wù)器有關(guān)于客戶端請(qǐng)求的信息

常用請(qǐng)求頭部：

User-Agent：產(chǎn)生請(qǐng)求的瀏覽器類型淌哟。
Accept：客戶端可識(shí)別的內(nèi)容類型列表迹卢。
Host：請(qǐng)求的主機(jī)名，允許多個(gè)域名同處一個(gè)IP地址徒仓，即虛擬主機(jī)腐碱。

報(bào)文內(nèi)容

$\color{red}{請(qǐng)求數(shù)據(jù)不在GET方法中使用，而是在POST方法中使用掉弛。}$ POST方法適用于需要客戶填寫表單的場(chǎng)合喻杈。與請(qǐng)求數(shù)據(jù)相關(guān)的最常使用的請(qǐng)求頭是Content-Type和Content-Length.

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

[圖片上傳失敗...(image-b78ad-1597991801950)]

響應(yīng)報(bào)文與請(qǐng)求報(bào)文的差異在與 $\color{red}{報(bào)文首部}$ ,響應(yīng)報(bào)文首部由：

狀態(tài)行
響應(yīng)首部字段

其中狀態(tài)行

HTTP-Version Status-Code Reason-Phrase CRLF
如：
HTTP/1.1 200 OK

HTTP-Version 服務(wù)器HTTP協(xié)議的版本
Status-Code 服務(wù)器發(fā)回的響應(yīng)狀態(tài)代碼
Reason-Phrase 狀態(tài)代碼的文本描述

狀態(tài)碼類型：

狀態(tài)碼	含義
1xx	指示信息--表示請(qǐng)求已接收，繼續(xù)處理
2xx	客戶端請(qǐng)求成功
3xx	重定向
4xx	客戶端錯(cuò)誤
5xx	服務(wù)端錯(cuò)誤

*注意： 很多人奇怪404狰晚，明明是服務(wù)器地址不存在，為什么是客戶端錯(cuò)缴啡，4xx錯(cuò)誤是指請(qǐng)求有語法錯(cuò)誤或請(qǐng)求無法實(shí)現(xiàn)

常見狀態(tài)：

200 OK：客戶端請(qǐng)求成功壁晒。
204 Not Content：正常響應(yīng)，沒有實(shí)體业栅。
304 Not Modified: 狀態(tài)未改變配合(If-Match秒咐、If-Modified-Since谬晕、If-None_Match、If-Range携取、If-Unmodified-Since)
400 Bad Request：客戶端請(qǐng)求有語法錯(cuò)誤攒钳，不能被服務(wù)器所理解。
401 Unauthorized：請(qǐng)求未經(jīng)授權(quán)雷滋，這個(gè)狀態(tài)代碼必須和WWW-Authenticate報(bào)頭域一起使用不撑。
403 Forbidden：服務(wù)器收到請(qǐng)求，但是拒絕提供服務(wù)晤斩。
404 Not Found：請(qǐng)求資源不存在焕檬，舉個(gè)例子：輸入了錯(cuò)誤的URL。
500 Internal Server Error：服務(wù)器發(fā)生不可預(yù)期的錯(cuò)誤澳泵。
503 Server Unavailable：服務(wù)器當(dāng)前不能處理客戶端的請(qǐng)求实愚，一段時(shí)間后可能恢復(fù)正常

響應(yīng)請(qǐng)求首部

分為：

通用首部(General Header)
響應(yīng)首部(Response Header)
實(shí)體首部(Entity Header Fields)

下篇文章中將詳細(xì)分析HTTP報(bào)文的首部字段.

詳細(xì)報(bào)文內(nèi)容請(qǐng)閱讀 HTTP請(qǐng)求報(bào)文和HTTP響應(yīng)報(bào)文和 HTTP協(xié)議－HTTP響應(yīng)報(bào)文