HTTP/2 從零到一

什麼是 HTTP/2?

在談到 HTTP/2 之前,讓我們先回顧一下整個 HTTP 發展的歷史。

為什麼我們需要 HTTP/2?

HTTP 基本上是一個 request <-> response 的 protocol,當時的設計主要是用於 browser 跟 server 之間進行 plain text 一次性的傳輸。

左: 2010 ~ 2019 網頁渲染所需下載 kb / 右: 2010 ~ 2019 網頁渲染所需 requests 數 / Source: https://httparchive.org/reports/state-of-the-web

HTTP/2 比 HTTP/1.x 好在哪?

先用一個清單列出使用 HTTP/2 的好處,針對某些優點,我們下面會有更詳細的解釋。

優點

  • 與 HTTP/1.x 的許多標準相容(method, status code, etc.)
  • Header Compression(頭部壓縮)
  • Binary Protocol(二進位協定)
  • HTTP/2 Server Push(伺服器推送)
  • TCP Multiplexing(多路複用)
  • No HOL blocking

Request Multiplexing 多路複用

HTTP/1.x 一直以來都有 Head-of-Line blocking 的問題,意即當一個 request 下載的內容過大時,會阻塞其他 request。雖然 HTTP/1.1 出現了 pipelining 試圖解決這個問題,但因實作細節上的難度,沒有被大多數 browser 支援,且因為要求 request 的 response 要有序,所以若任何一個 request 太大或太慢時,依然會有 blocking 的問題。

Header Compression 頭部壓縮

HTTP/2 利用 HPACK 進行壓縮,其中包含 1. 靜態字典 2. 動態字典 3. 霍夫曼編碼三種方式,將大量重複的 Header key:value 壓縮成 1 ~ 2 bytes。
在許多 modern web,初始頁面渲染常常要 80 甚至 100 個 requests,Header Compression 在節省流量上有顯著的效益。

Binary Protocol 二進位協定

HTTP/2 在傳輸時是以 Binary 為主,這大大減輕了實作上的負擔,而且 Binary 的 Parsing 遠遠比 Text 還要來得有效率。
在 HTTP/1.1,為了正確處理純文字的 parsing(換行、空行、空白等等都是需要特別處理),定義了四種方法,而在 HTTP/2 中只需要一種處理方式。

HTTP/2 Server Push 伺服器推送

以一般的 web 為例,傳統 HTTP/1.x 要等到 browser 收到 HTML 之後,再根據上面指定的網址去索取對應的 CSS 跟 JavaScript。
而透過 Server Push,server 可以在 client 提出後續請求之前,主動將這些已知會被接著請求的檔案推送給 client。

HTTP 2 在各大 browser 的支援度

https://caniuse.com/#feat=http2
Source: https://caniuse.com/#feat=http2

如何在 Node.js 中使用 HTTP/2

Node.js 本身就有 http2 的 module 可以直接使用,完全不需要 install 其他 lib 就可以體驗 HTTP/2

參考

--

--

目前在英國倫敦的台灣人軟體工程師,曾經待過台灣、新加坡、荷蘭。希望透過分享,來產生更多思維碰撞💥 | LinkedIn: @hieven

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Even Chang

目前在英國倫敦的台灣人軟體工程師,曾經待過台灣、新加坡、荷蘭。希望透過分享,來產生更多思維碰撞💥 | LinkedIn: @hieven