![HTTP 2.0 時代,你落伍了嗎?](http://p2.ttnews.xyz/loading.gif)
提到 HTTP2.0 ,第一印象就是:這與 HTTP1.0 的區別是什麼,有怎樣的改進?
大的版本變化必然會有更強力的特性,那不妨拿來了解一下。
一、先了解 HTTP1.0 和 HTTP1.1
![HTTP 2.0 時代,你落伍了嗎?](http://p2.ttnews.xyz/loading.gif)
我們先撇開 HTTP2 和 HTTP1 的區別,來說說 HTTP1.0 和 HTTP1.1 的區別,因為它倆本身就存在一些大的區別:
1.長連接;
HTTP 1.0 需要使用 keep-alive 參數來告知服務器端要建立一個長連接,而 HTTP1.1 默認支持長連接。
2.節約帶寬
HTTP 1.1 支持只發送 header 信息(不帶任何 body 信息),如果服務器認為客戶端有權限請求服務器,則返回 100,否則返回 401。
客戶端如果接受到 100,才開始把請求 body 發送到服務器。
3.HOST 域
現在可以 web server 例如 tomat,設置虛擬站點是非常常見的,也即是說,web server上的多個虛擬站點可以共享同一個 ip 和端口。
HTTP1.0 是沒有 host 域的,HTTP1.1才支持這個參數。
二、HTTP2 新特性
眾所周知 ,在 HTTP1.1 協議中 「瀏覽器客戶端在同一時間,針對同一域名下的請求有一定數量限制,超過限制數目的請求會被阻塞」,也就是我們常說的 Pending 狀態。
提到 HTTP2 的新特性,有三個特性肯定是亮點:
1.多路複用:
多路複用允許同時通過單一的 HTTP2 連接發起多重的請求-響應消息先來看一張流程對比圖。
因此 HTTP2 可以很容易的去實現多流並行而不用依賴建立多個 TCP 連接,HTTP2 把 HTTP 協議通信的基本單位縮小為一個一個的幀。
這些幀對應著邏輯流中的消息,並行地在同一個 TCP 連接上。
這樣來說的話,多路複用也為前端性能優化提供了更高效的方式。
2.首部數據壓縮
HTTP1.1 不支持 header 數據的壓縮,HTTP2.0 使用 HPACK 算法對 header 的數據進行壓縮,這樣數據體積小了,在網絡上傳輸就會更快。
HTTP1.1 並不支持 HTTP 首部壓縮,為此 SPDY 和 HTTP/2 應運而生, SPDY 使用的是通用的 DEFLATE 算法,而 HTTP2 則使用了專門為首部壓縮而設計的。
3.服務器推送
當我們對支持 HTTP2.0 的 web server 請求數據的時候,服務器會順便把一些客戶端需要的資源一起推送到客戶端,免得客戶端再次創建連接發送請求到服務器端獲取。
這種方式非常合適加載靜態資源。
引用 HTTP/2.0 相比 1.0 有哪些重大改進 中的描述:
服務端推送是一種在客戶端請求之前發送數據的機制。在 HTTP/2 中,服務器可以對客戶端的一個請求發送多個響應。Server Push 讓 HTTP1.x 時代使用內嵌資源的優化手段變得沒有意義;
如果一個請求是由你的主頁發起的,服務器很可能會響應主頁內容、logo 以及樣式表,因為它知道客戶端會用到這些東西。
這相當於在一個 HTML 文檔內集合了所有的資源。不過與之相比,服務器推送還有一個很大的優勢:可以緩存!也讓在遵循同源的情況下,不同頁面之間可以共享緩存資源成為可能。
三、關於 HTTP2 性能
說的天花亂墜,HTTP2 不但能多路複用,而且還可以壓縮頭部數據,以及做一些服務器端推送。
那麼,HTTP2 真正的性能到底如何呢?我們來看看深入研究:
https://segmentfault.com/a/1190000007219256
文章做了一些驗證試驗,這裡就不贅述了,我們來看一下試驗結果,有一個感性認識。
通過上述一系列的實驗,我們可以知道 HTTP2 的性能優勢集中體現在“多路複用”和“服務端推送”上。
1.對於請求數目較少(約小於30個)的情況下,HTTP1 和 HTTP2 的性能差異不大,在請求數目較多且延遲大於 30ms 的情況下,才能體現 HTTP2 的性能優勢。
2.對於網絡狀況較差的環境,HTTP2 的性能也高於 HTTP1。
3.與此同時,如果把靜態資源都通過服務端推送的方式來處理,加載速度會得到更加巨大的提升。
4.在實際的應用中,由於 HTTP2 多路複用的優勢,前端應用團隊
無須採取把多個文件合併成一個,生成雪碧圖之類的方法減少網絡請求。除此之外,HTTP2 對於前端開發的影響並不大。
四、效果演示
對於網絡狀況較差的環境,HTTP2 的性能也高於 HTTP1。我們可以看看下面這個動圖:
可以看出 HTTP1.1 和 HTTP2 在比較接近的服務器延遲 條件下,HTTP2 的加載速度明顯要優於 HTTP1。
1.
2.
3.
閱讀更多 F2EAwesome 的文章