解密HTTP/2與HTTP/3 的新特性

前言

HTTP/2 相比於 HTTP/1.1，可以說是大幅度提高了網頁的性能，只需要升級到該協議就可以減少很多之前需要做的性能優化工作，當然兼容問題以及如何優雅降級應該是國內還不普遍使用的原因之一。

雖然 HTTP/2 提高了網頁的性能，但是並不代表它已經是完美的了，HTTP/3 就是爲了解決 HTTP/2 所存在的一些問題而被推出來的。

 

一、HTTP/1.1發明以來發生了哪些變化？

如果仔細觀察打開那些最流行的網站首頁所需要下載的資源的話，會發現一個非常明顯的趨勢。 近年來加載網站首頁需要的下載的數據量在逐漸增加，並已經超過了2100K。但在這裏我們更應該關心的是：平均每個頁面爲了完成顯示與渲染所需要下載的資源數已經超過了100個。

正如下圖所示，從2011年以來,傳輸數據大小與平均請求資源數量不斷持續增長，並沒有減緩的跡象。該圖表中綠色直線展示了傳輸數據大小的增長，紅色直線展示了平均請求資源數量的增長。

HTTP/1.1自從1997年發佈以來，我們已經使用HTTP/1.x 相當長一段時間了，但是隨着近十年互聯網的爆炸式發展，從當初網頁內容以文本爲主,到現在以富媒體（如圖片、聲音、視頻）爲主,而且對頁面內容實時性高要求的應用越來越多(比如聊天、視頻直播),於是當時協議規定的某些特性，已經無法滿足現代網絡的需求了。

 

二、HTTP/1.1的缺陷

1.高延遲--帶來頁面加載速度的降低

雖然近幾年來網絡帶寬增長非常快，然而我們卻並沒有看到網絡延遲有對應程度的降低。網絡延遲問題主要由於隊頭阻塞(Head-Of-Line Blocking),導致帶寬無法被充分利用。

隊頭阻塞是指當順序發送的請求序列中的一個請求因爲某種原因被阻塞時，在後面排隊的所有請求也一併被阻塞，會導致客戶端遲遲收不到數據。針對隊頭阻塞,人們嘗試過以下辦法來解決:

• 將同一頁面的資源分散到不同域名下，提升連接上限。 Chrome有個機制，對於同一個域名，默認允許同時建立 6 個 TCP持久連接，使用持久連接時，雖然能公用一個TCP管道，但是在一個管道中同一時刻只能處理一個請求，在當前的請求沒有結束之前，其他的請求只能處於阻塞狀態。另外如果在同一個域名下同時有10個請求發生，那麼其中4個請求會進入排隊等待狀態，直至進行中的請求完成。
• Spriting合併多張小圖爲一張大圖,再用JavaScript或者CSS將小圖重新“切割”出來的技術。
• 內聯(Inlining)是另外一種防止發送很多小圖請求的技巧，將圖片的原始數據嵌入在CSS文件裏面的URL裏，減少網絡請求次數。

.icon1 {
    background: url(data:image/png;base64,<data>) no-repeat;
  }
.icon2 {
    background: url(data:image/png;base64,<data>) no-repeat;
  }

• 拼接(Concatenation)將多個體積較小的JavaScript使用webpack等工具打包成1個體積更大的JavaScript文件,但如果其中1個文件的改動就會導致大量數據被重新下載多個文件。

2.無狀態特性--帶來的巨大HTTP頭部

由於報文Header一般會攜帶"User Agent""Cookie""Accept""Server"等許多固定的頭字段（如下圖），多達幾百字節甚至上千字節，但Body卻經常只有幾十字節（比如GET請求、
204/301/304響應），成了不折不扣的“大頭兒子”。Header裏攜帶的內容過大，在一定程度上增加了傳輸的成本。更要命的是，成千上萬的請求響應報文裏有很多字段值都是重複的，非常浪費。

 

3.明文傳輸--帶來的不安全性

HTTP/1.1在傳輸數據時，所有傳輸的內容都是明文，客戶端和服務器端都無法驗證對方的身份，這在一定程度上無法保證數據的安全性。

你有沒有聽說過"免費WiFi陷阱”之類的新聞呢？
黑客就是利用了HTTP明文傳輸的缺點，在公共場所架設一個WiFi熱點開始“釣魚”，誘騙網民上網。一旦你連上了這個WiFi熱點，所有的流量都會被截獲保存，裏面如果有銀行卡號、網站密碼等敏感信息的話那就危險了，黑客拿到了這些數據就可以冒充你爲所欲爲。

4.不支持服務器推送消息

 

三、SPDY 協議與 HTTP/2 簡介

1.SPDY 協議

上面我們提到,由於HTTP/1.x的缺陷，我們會引入雪碧圖、將小圖內聯、使用多個域名等等的方式來提高性能。不過這些優化都繞開了協議，直到2009年，谷歌公開了自行研發的 SPDY 協議，主要解決HTTP/1.1效率不高的問題。谷歌推出SPDY，纔算是正式改造HTTP協議本身。降低延遲，壓縮header等等，SPDY的實踐證明了這些優化的效果，也最終帶來HTTP/2的誕生。

HTTP/1.1有兩個主要的缺點：安全不足和性能不高，由於揹負着 HTTP/1.x 龐大的歷史包袱,所以協議的修改,兼容性是首要考慮的目標，否則就會破壞互聯網上無數現有的資產。如上圖所示,
SPDY位於HTTP之下，TCP和SSL之上，這樣可以輕鬆兼容老版本的HTTP協議(將HTTP1.x的內容封裝成一種新的frame格式)，同時可以使用已有的SSL功能。

SPDY 協議在Chrome瀏覽器上證明可行以後，就被當作 HTTP/2 的基礎，主要特性都在 HTTP/2 之中得到繼承。

2.HTTP/2 簡介

2015年，HTTP/2 發佈。HTTP/2是現行HTTP協議（HTTP/1.x）的替代，但它不是重寫，HTTP方法/狀態碼/語義都與HTTP/1.x一樣。HTTP/2基於SPDY，專注於性能，最大的一個目標是在用戶和網站間只用一個連接（connection）。從目前的情況來看，國內外一些排名靠前的站點基本都實現了HTTP/2的部署，使用HTTP/2能帶來20%~60%的效率提升。

HTTP/2由兩個規範（Specification）組成：

1. Hypertext Transfer Protocol version 2 - RFC7540
2. HPACK - Header Compression for HTTP/2 - RFC7541

 

四、HTTP/2 新特性

1.二進制傳輸

HTTP/2傳輸數據量的大幅減少,主要有兩個原因:以二進制方式傳輸和Header 壓縮。我們先來介紹二進制傳輸,HTTP/2 採用二進制格式傳輸數據，而非HTTP/1.x 裏純文本形式的報文 ，二進制協議解析起來更高效。 HTTP/2 將請求和響應數據分割爲更小的幀，並且它們採用二進制編碼。

它把TCP協議的部分特性挪到了應用層，把原來的"Header+Body"的消息"打散"爲數個小片的二進制"幀"(Frame),用"HEADERS"幀存放頭數據、"DATA"幀存放實體數據。HTP/2數據分幀後"Header+Body"的報文結構就完全消失了，協議看到的只是一個個的"碎片"。

HTTP/2 中，同域名下所有通信都在單個連接上完成，該連接可以承載任意數量的雙向數據流。每個數據流都以消息的形式發送，而消息又由一個或多個幀組成。多個幀之間可以亂序發送，根據幀首部的流標識可以重新組裝。

2.Header 壓縮

HTTP/2並沒有使用傳統的壓縮算法，而是開發了專門的"HPACK”算法，在客戶端和服務器兩端建立“字典”，用索引號表示重複的字符串，還採用哈夫曼編碼來壓縮整數和字符串，可以達到50%~90%的高壓縮率。

具體來說:

• 在客戶端和服務器端使用“首部表”來跟蹤和存儲之前發送的鍵-值對，對於相同的數據，不再通過每次請求和響應發送；
• 首部表在HTTP/2的連接存續期內始終存在，由客戶端和服務器共同漸進地更新;
• 每個新的首部鍵-值對要麼被追加到當前表的末尾，要麼替換表中之前的值

例如下圖中的兩個請求， 請求一發送了所有的頭部字段，第二個請求則只需要發送差異數據，這樣可以減少冗餘數據，降低開銷

3.多路複用

在 HTTP/2 中引入了多路複用的技術。多路複用很好的解決了瀏覽器限制同一個域名下的請求數量的問題，同時也接更容易實現全速傳輸，畢竟新開一個 TCP 連接都需要慢慢提升傳輸速度。

大家可以通過 該鏈接 直觀感受下 HTTP/2 比 HTTP/1 到底快了多少。

在 HTTP/2 中，有了二進制分幀之後，HTTP /2 不再依賴 TCP 鏈接去實現多流並行了，在 HTTP/2中,

• 同域名下所有通信都在單個連接上完成。
• 單個連接可以承載任意數量的雙向數據流。
• 數據流以消息的形式發送，而消息又由一個或多個幀組成，多個幀之間可以亂序發送，因爲根據幀首部的流標識可以重新組裝。

這一特性，使性能有了極大提升：

• 同個域名只需要佔用一個 TCP 連接，使用一個連接並行發送多個請求和響應,這樣整個頁面資源的下載過程只需要一次慢啓動，同時也避免了多個TCP連接競爭帶寬所帶來的問題。
• 並行交錯地發送多個請求/響應，請求/響應之間互不影響。
• 在HTTP/2中，每個請求都可以帶一個31bit的優先值，0表示最高優先級， 數值越大優先級越低。有了這個優先值，客戶端和服務器就可以在處理不同的流時採取不同的策略，以最優的方式發送流、消息和幀。

如上圖所示，多路複用的技術可以只通過一個 TCP 連接就可以傳輸所有的請求數據。

4.Server Push

HTTP2還在一定程度上改變了傳統的“請求-應答”工作模式，服務器不再是完全被動地響應請求，也可以新建“流”主動向客戶端發送消息。比如，在瀏覽器剛請求HTML的時候就提前把可能會用到的JS、CSS文件發給客戶端，減少等待的延遲，這被稱爲"服務器推送"（ Server Push，也叫 Cache push）

例如下圖所示,服務端主動把JS和CSS文件推送給客戶端，而不需要客戶端解析HTML時再發送這些請求。

另外需要補充的是,服務端可以主動推送，客戶端也有權利選擇是否接收。如果服務端推送的資源已經被瀏覽器緩存過，瀏覽器可以通過發送RST_STREAM幀來拒收。主動推送也遵守同源策略，換句話說，服務器不能隨便將第三方資源推送給客戶端，而必須是經過雙方確認才行。

5.提高安全性

出於兼容的考慮，HTTP/2延續了HTTP/1的“明文”特點，可以像以前一樣使用明文傳輸數據，不強制使用加密通信，不過格式還是二進制，只是不需要解密。

但由於HTTPS已經是大勢所趨，而且主流的瀏覽器Chrome、Firefox等都公開宣佈只支持加密的HTTP/2，所以“事實上”的HTTP/2是加密的。也就是說，互聯網上通常所能見到的HTTP/2都是使用"https”協議名，跑在TLS上面。HTTP/2協議定義了兩個字符串標識符：“h2"表示加密的HTTP/2，“h2c”表示明文的HTTP/2。

 

六、HTTP/3 新特性

1.HTTP/2 的缺點

雖然 HTTP/2 解決了很多之前舊版本的問題，但是它還是存在一個巨大的問題，主要是底層支撐的 TCP 協議造成的。HTTP/2的缺點主要有以下幾點：

• TCP 以及 TCP+TLS建立連接的延時

HTTP/2使用TCP協議來傳輸的，而如果使用HTTPS的話，還需要使用TLS協議進行安全傳輸，而使用TLS也需要一個握手過程，這樣就需要有兩個握手延遲過程：

①在建立TCP連接的時候，需要和服務器進行三次握手來確認連接成功，也就是說需要在消耗完1.5個RTT之後才能進行數據傳輸。

②進行TLS連接，TLS有兩個版本——TLS1.2和TLS1.3，每個版本建立連接所花的時間不同，大致是需要1~2個RTT。

總之，在傳輸數據之前，我們需要花掉 3～4 個 RTT。

• TCP的隊頭阻塞並沒有徹底解決

上文我們提到在HTTP/2中，多個請求是跑在一個TCP管道中的。但當出現了丟包時，HTTP/2 的表現反倒不如 HTTP/1 了。因爲TCP爲了保證可靠傳輸，有個特別的“丟包重傳”機制，丟失的包必須要等待重新傳輸確認，HTTP/2出現丟包時，整個 TCP 都要開始等待重傳，那麼就會阻塞該TCP連接中的所有請求（如下圖）。而對於 HTTP/1.1 來說，可以開啓多個 TCP 連接，出現這種情況反到只會影響其中一個連接，剩餘的 TCP 連接還可以正常傳輸數據。

讀到這裏，可能就會有人考慮爲什麼不直接去修改 TCP 協議？其實這已經是一件不可能完成的任務了。因爲 TCP 存在的時間實在太長，已經充斥在各種設備中，並且這個協議是由操作系統實現的，更新起來不大現實。

2.HTTP/3簡介

Google 在推SPDY的時候就已經意識到了這些問題，於是就另起爐竈搞了一個基於 UDP 協議的“QUIC”協議，讓HTTP跑在QUIC上而不是TCP上。
而這個“HTTP over QUIC”就是HTTP協議的下一個大版本，HTTP/3。它在HTTP/2的基礎上又實現了質的飛躍，真正“完美”地解決了“隊頭阻塞”問題。

QUIC 雖然基於 UDP，但是在原本的基礎上新增了很多功能，接下來我們重點介紹幾個QUIC新功能。不過HTTP/3目前還處於草案階段，正式發佈前可能會有變動，所以本文儘量不涉及那些不穩定的細節。

3.QUIC新功能

上面我們提到QUIC基於UDP，而UDP是“無連接”的，根本就不需要“握手”和“揮手”，所以就比TCP來得快。此外QUIC也實現了可靠傳輸，保證數據一定能夠抵達目的地。它還引入了類似HTTP/2的“流”和“多路複用”，單個“流"是有序的，可能會因爲丟包而阻塞，但其他“流”不會受到影響。具體來說QUIC協議有以下特點：

• 實現了類似TCP的流量控制、傳輸可靠性的功能。

雖然UDP不提供可靠性的傳輸，但QUIC在UDP的基礎之上增加了一層來保證數據可靠性傳輸。它提供了數據包重傳、擁塞控制以及其他一些TCP中存在的特性。

• 實現了快速握手功能。

由於QUIC是基於UDP的，所以QUIC可以實現使用0-RTT或者1-RTT來建立連接，這意味着QUIC可以用最快的速度來發送和接收數據，這樣可以大大提升首次打開頁面的速度。0RTT 建連可以說是 QUIC 相比 HTTP2 最大的性能優勢。

• 集成了TLS加密功能。

目前QUIC使用的是TLS1.3，相較於早期版本TLS1.3有更多的優點，其中最重要的一點是減少了握手所花費的RTT個數。

• 多路複用，徹底解決TCP中隊頭阻塞的問題

和TCP不同，QUIC實現了在同一物理連接上可以有多個獨立的邏輯數據流（如下圖）。實現了數據流的單獨傳輸，就解決了TCP中隊頭阻塞的問題。

七、總結

• HTTP/1.1有兩個主要的缺點：安全不足和性能不高。
• HTTP/2完全兼容HTTP/1，是“更安全的HTTP、更快的HTTPS"，頭部壓縮、多路複用等技術可以充分利用帶寬，降低延遲，從而大幅度提高上網體驗；
• QUIC 基於 UDP 實現，是 HTTP/3 中的底層支撐協議，該協議基於 UDP，又取了 TCP 中的精華，實現了即快又可靠的協議

 

參考文章

• 珠峯架構課(強烈推薦)
• 透視HTTP協議
• Web協議詳解與抓包實戰
• 瀏覽器工作原理與實踐
• HTTP2講解
• 一文讀懂 HTTP/2 特性
• 科普：QUIC協議原理分析
• HTTP2簡介和基於HTTP2的Web優化