HTTP 2.0 初體驗

背景

從 HTTP 2.0 發佈至今，已經愈來愈多的網站開始部署 HTTP/2 了，正好最近一直在研究前端性能優化，就決定在我的網站先嚐嚐鮮。

HTTP/2 概述

官網先來一波HTTP/2 官網，HTTP 2.0 的出現，相比於 HTTP 1.x ，作出了不少優化調整，大幅提高了前端 web 性能，減小網絡延遲等等。 HTTP/2: the Future of the Internet | Akamai這是 Akamai 公司創建的一個官方的演示，用以說明 HTTP/2 相比於以前的 HTTP/1.1 在性能上的大幅度提高。 同時請求 379 張圖片，從 Load time 的對比能夠看出 HTTP/2 在速度上的優點。 關於 HTTP/2 百度內容不少，下面我列出比較好的 HTTP/2 內容的地址，你們能夠去這些地址查看。

1. HTTP/2.0 相比 1.0 有哪些重大改進？ 來自知乎
2. HTTP/2 資料彙總 推薦，從協議自己，到部署優化，再到工具調試和參開書籍等都包含了。
3. HTTP,HTTP2.0,SPDY,HTTPS 看這篇就夠了
4. HTTP、HTTP2.0、SPDY、HTTPS 你應該知道的一些事

下面內容 來自上面連接第四個，能夠直接去查看原文，也能夠在本文查看。

web 始祖 HTTP

全稱：超文本傳輸協議(HyperText Transfer Protocol) 伴隨着計算機網絡和瀏覽器的誕生，HTTP1.0 也隨之而來，處於計算機網絡中的應用層，HTTP 是創建在 TCP 協議之上，因此 HTTP 協議的瓶頸及其優化技巧都是基於 TCP 協議自己的特性，例如 tcp 創建鏈接的 3 次握手和斷開鏈接的 4 次揮手以及每次創建鏈接帶來的 RTT 延遲時間。

HTTP 與現代化瀏覽器

早在 HTTP 創建之初，主要就是爲了將超文本標記語言(HTML)文檔從 Web 服務器傳送到客戶端的瀏覽器。也是說對於前端來講，咱們所寫的 HTML 頁面將要放在咱們的 web 服務器上，用戶端經過瀏覽器訪問 url 地址來獲取網頁的顯示內容，可是到了 WEB2.0 以來，咱們的頁面變得複雜，不只僅單純的是一些簡單的文字和圖片，同時咱們的 HTML 頁面有了 CSS，Javascript，來豐富咱們的頁面展現，當 ajax 的出現，咱們又多了一種向服務器端獲取數據的方法，這些其實都是基於 HTTP 協議的。一樣到了移動互聯網時代，咱們頁面能夠跑在手機端瀏覽器裏面，可是和 PC 相比，手機端的網絡狀況更加複雜，這使得咱們開始了不起不對 HTTP 進行深刻理解並不斷優化過程當中。

HTTP 的基本優化

影響一個 HTTP 網絡請求的因素主要有兩個：帶寬和延遲。

• 帶寬：若是說咱們還停留在撥號上網的階段，帶寬可能會成爲一個比較嚴重影響請求的問題，可是如今網絡基礎建設已經使得帶寬獲得極大的提高，咱們再也不會擔憂由帶寬而影響網速，那麼就只剩下延遲了。
• 延遲：
  1. **瀏覽器阻塞（HOL blocking）：**瀏覽器會由於一些緣由阻塞請求。瀏覽器對於同一個域名，同時只能有 4 個鏈接（這個根據瀏覽器內核不一樣可能會有所差別），超過瀏覽器最大鏈接數限制，後續請求就會被阻塞。
  2. **DNS 查詢（DNS Lookup）：**瀏覽器須要知道目標服務器的 IP 才能創建鏈接。將域名解析爲 IP 的這個系統就是 DNS。這個一般能夠利用 DNS 緩存結果來達到減小這個時間的目的。
  3. **創建鏈接（Initial connection）：**HTTP 是基於 TCP 協議的，瀏覽器最快也要在第三次握手時才能捎帶 HTTP 請求報文，達到真正的創建鏈接，可是這些鏈接沒法複用會致使每次請求都經歷三次握手和慢啓動。三次握手在高延遲的場景下影響較明顯，慢啓動則對文件類大請求影響較大。

HTTP1.0 和 HTTP1.1 的一些區別

HTTP1.0 最先在網頁中使用是在 1996 年，那個時候只是使用一些較爲簡單的網頁上和網絡請求上，而 HTTP1.1 則在 1999 年纔開始普遍應用於如今的各大瀏覽器網絡請求中，同時 HTTP1.1 也是當前使用最爲普遍的 HTTP 協議。 主要區別主要體如今：

1. **緩存處理：**在 HTTP1.0 中主要使用 header 裏的 If-Modified-Since,Expires 來作爲緩存判斷的標準，HTTP1.1 則引入了更多的緩存控制策略例如 Entity tag，If-Unmodified-Since, If-Match, If-None-Match 等更多可供選擇的緩存頭來控制緩存策略。
2. **帶寬優化及網絡鏈接的使用：**HTTP1.0 中，存在一些浪費帶寬的現象，例如客戶端只是須要某個對象的一部分，而服務器卻將整個對象送過來了，而且不支持斷點續傳功能，HTTP1.1 則在請求頭引入了 range 頭域，它容許只請求資源的某個部分，即返回碼是 206（Partial Content），這樣就方便了開發者自由的選擇以便於充分利用帶寬和鏈接。
3. **錯誤通知的管理：**在 HTTP1.1 中新增了 24 個錯誤狀態響應碼，如 409（Conflict）表示請求的資源與資源的當前狀態發生衝突；410（Gone）表示服務器上的某個資源被永久性的刪除。
4. **Host 頭處理：**在 HTTP1.0 中認爲每臺服務器都綁定一個惟一的 IP 地址，所以，請求消息中的 URL 並無傳遞主機名（hostname）。但隨着虛擬主機技術的發展，在一臺物理服務器上能夠存在多個虛擬主機（Multi-homed Web Servers），而且它們共享一個 IP 地址。HTTP1.1 的請求消息和響應消息都應支持 Host 頭域，且請求消息中若是沒有 Host 頭域會報告一個錯誤（400 Bad Request）。
5. **長鏈接：**HTTP 1.1 支持長鏈接（PersistentConnection）和請求的流水線（Pipelining）處理，在一個 TCP 鏈接上能夠傳送多個 HTTP 請求和響應，減小了創建和關閉鏈接的消耗和延遲，在 HTTP1.1 中默認開啓 Connection： keep-alive，必定程度上彌補了 HTTP1.0 每次請求都要建立鏈接的缺點。如下是常見的 HTTP1.0：

區別用一張圖來體現：

HTTP1.0 和 1.1 現存的一些問題

1. 上面提到過的，HTTP1.x 在傳輸數據時，每次都須要從新創建鏈接，無疑增長了大量的延遲時間，特別是在移動端更爲突出。
2. HTTP1.x 在傳輸數據時，全部傳輸的內容都是明文，客戶端和服務器端都沒法驗證對方的身份，這在必定程度上沒法保證數據的安全性。
3. HTTP1.x 在使用時，header 裏攜帶的內容過大，在必定程度上增長了傳輸的成本，而且每次請求 header 基本不怎麼變化，尤爲在移動端增長用戶流量。
4. 雖然 HTTP1.x 支持了 keep-alive，來彌補屢次建立鏈接產生的延遲，可是 keep-alive 使用多了一樣會給服務端帶來大量的性能壓力，而且對於單個文件被不斷請求的服務(例如圖片存放網站)，keep-alive 可能會極大的影響性能，由於它在文件被請求以後還保持了沒必要要的鏈接很長時間。

HTTPS 應聲而出

爲了解決以上問題，網景在 1994 年建立了 HTTPS，並應用在網景導航者瀏覽器中。 最初，HTTPS 是與 SSL 一塊兒使用的；在 SSL 逐漸演變到 TLS 時（其實兩個是一個東西，只是名字不一樣而已），最新的 HTTPS 也由在 2000 年五月公佈的 RFC 2818 正式肯定下來。簡單來講，HTTPS 就是安全版的 HTTP，而且因爲當今時代對安全性要求更高，chrome 和 firefox 都大力支持網站使用 HTTPS，蘋果也在 ios 10 系統中強制 app 使用 HTTPS 來傳輸數據，因而可知 HTTPS 勢在必行。

HTTPS 與 HTT

1. HTTPS 協議須要到 CA 申請證書，通常免費證書不多，須要交費。
2. HTTP 協議運行在 TCP 之上，全部傳輸的內容都是明文，HTTPS 運行在 SSL/TLS 之上，SSL/TLS 運行在 TCP 之上，全部傳輸的內容都通過加密的。
3. HTTP 和 HTTPS 使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是 80，後者是 443。
4. HTTPS 能夠有效的防止運營商劫持，解決了防劫持的一個大問題。

HTTPS 改造

若是一個網站要全站由 HTTP 替換成 HTTPS，可能須要關注如下幾點：

1. 安裝 CA 證書，通常的證書都是須要收費的，這邊推薦一個比較好的購買證書網站：1）Let's Encrypt，免費，快捷，支持多域名（不是通配符），三條命令即時簽署+導出證書。缺點是暫時只有三個月有效期，到期需續簽。2Comodo PositiveSSL，收費，可是比較穩定。
2. 在購買證書以後，在證書提供的網站上配置本身的域名，將證書下載下來以後，配置本身的 web 服務器，同時進行代碼改造。
3. HTTPS 下降用戶訪問速度。SSL 握手，HTTPS 對速度會有必定程度的下降，可是隻要通過合理優化和部署，HTTPS 對速度的影響徹底能夠接受。在不少場景下，HTTPS 速度徹底不遜於 HTTP，若是使用 SPDY，HTTPS 的速度甚至還要比 HTTP 快。
4. 相對於 HTTPS 下降訪問速度，其實更須要關心的是服務器端的 CPU 壓力，HTTPS 中大量的密鑰算法計算，會消耗大量的 CPU 資源，只有足夠的優化，HTTPS 的機器成本纔不會明顯增長。

推薦一則淘寶網改造 HTTPS的文章。

使用 SPDY 加快你的網站速度

2012 年 google 如一聲驚雷提出了 SPDY 的方案，你們纔開始從正面看待和解決老版本 HTTP 協議自己的問題，SPDY 能夠說是綜合了 HTTPS 和 HTTP 二者有點於一體的傳輸協議，主要解決：

1. **下降延遲：**針對 HTTP 高延遲的問題，SPDY 優雅的採起了多路複用（multiplexing）。多路複用經過多個請求 stream 共享一個 tcp 鏈接的方式，解決了 HOL blocking 的問題，下降了延遲同時提升了帶寬的利用率。
2. **請求優先級（request prioritization）：**多路複用帶來一個新的問題是，在鏈接共享的基礎之上有可能會致使關鍵請求被阻塞。SPDY 容許給每一個 request 設置優先級，這樣重要的請求就會優先獲得響應。好比瀏覽器加載首頁，首頁的 html 內容應該優先展現，以後纔是各類靜態資源文件，腳本文件等加載，這樣能夠保證用戶能第一時間看到網頁內容。
3. **header 壓縮：**前面提到 HTTP1.x 的 header 不少時候都是重複多餘的。選擇合適的壓縮算法能夠減少包的大小和數量。
4. **服務端推送（server push）：**採用了 SPDY 的網頁，例如個人網頁有一個 sytle.css 的請求，在客戶端收到 sytle.css 數據的同時，服務端會將 sytle.js 的文件推送給客戶端，當客戶端再次嘗試獲取 sytle.js 時就能夠直接從緩存中獲取到，不用再發請求了。

HTTP2.0 的前世此生

顧名思義有了 HTTP1.x，那麼 HTTP2.0 也就瓜熟蒂落的出現了。HTTP2.0 能夠說是 SPDY 的升級版（其實本來也是基於 SPDY 設計的），可是，HTTP2.0 跟 SPDY 仍有不一樣的地方，主要是如下兩點：

1. HTTP2.0 支持明文 HTTP 傳輸，而 SPDY 強制使用 HTTPS
2. HTTP2.0 消息頭的壓縮算法採用 HPACK，而非 SPDY 採用的 DEFLATE

HTTP2.0 的新特性

• **新的二進制格式（Binary Format）：**HTTP1.x 的解析是基於文本。基於文本協議的格式解析存在自然缺陷，文本的表現形式有多樣性，要作到健壯性考慮的場景必然不少，二進制則不一樣，只認 0 和 1 的組合。基於這種考慮 HTTP2.0 的協議解析決定採用二進制格式，實現方便且健壯。
• **多路複用（MultiPlexing）：**即鏈接共享，即每個 request 都是是用做鏈接共享機制的。一個 request 對應一個 id，這樣一個鏈接上能夠有多個 request，每一個鏈接的 request 能夠隨機的混雜在一塊兒，接收方能夠根據 request 的 id 將 request 再歸屬到各自不一樣的服務端請求裏面。

• **header 壓縮：**如上文中所言，對前面提到過 HTTP1.x 的 header 帶有大量信息，並且每次都要重複發送，HTTP2.0 使用 encoder 來減小須要傳輸的 header 大小，通信雙方各自 cache 一份 header fields 表，既避免了重複 header 的傳輸，又減少了須要傳輸的大小。
• **服務端推送（server push）：**同 SPDY 同樣，HTTP2.0 也具備 server push 功能。目前，有大多數網站已經啓用 HTTP2.0，例如 YouTuBe，淘寶網等網站，利用 chrome 控制檯能夠查看是否啓用 H2：

更多關於 HTTP2 的問題能夠參考：HTTP2 奇妙平常，以及 HTTP/2 官網。

HTTP2.0 的升級改造

對比 HTTPS 的升級改造，HTTP2.0 或許會稍微簡單一些，你可能須要關注如下問題：

1. 前文說了 HTTP2.0 其實能夠支持非 HTTPS 的，可是如今主流的瀏覽器像 chrome，firefox 表示仍是隻支持基於 TLS 部署的 HTTP2.0 協議，因此要想升級成 HTTP2.0 仍是先升級 HTTPS 爲好。
2. 當你的網站已經升級 HTTPS 以後，那麼升級 HTTP2.0 就簡單不少，若是你使用 NGINX，只要在配置文件中啓動相應的協議就能夠了，能夠參考 NGINX 白皮書，NGINX 配置 HTTP2.0 官方指南。
3. 使用了 HTTP2.0 那麼，本來的 HTTP1.x 怎麼辦，這個問題其實不用擔憂，HTTP2.0 徹底兼容 HTTP1.x 的語義，對於不支持 HTTP2.0 的瀏覽器，NGINX 會自動向下兼容的。

後記

• 以上就是關於 HTTP,HTTP2.0,SPDY,HTTPS 的一些基本理論，有些內容沒有深刻講解，你們能夠跟進參考鏈接具體查看。
• 關於 HTTP1.x 的一些優化方式，例如文件合併壓縮，資源 cdn，js，css 優化等等一樣使用與 HTTP2.0 和 HTTPS，因此 web 前端的優化，仍是要繼續進行。
• 其實 WEB 發展如此迅速的今天，有些技術是真的要與時俱進的，就像蘋果宣佈 ios 10 必須使用 HTTPS 開始，關於 web 協議革新就已經開始了，爲了更好的性能，更優越的方式，如今就開始升級改造吧

HTTP/2 搭建

正如上面後記所說，開始改造吧！我改造的網站是個人我的網站。

• **下載 SSL 證書：**個人域名是在阿里雲購買的，登入阿里雲後臺進入域名基本信息查看，就能看到免費開啓 SSL 證書，若是你有錢能夠選擇第一個，做爲窮逼一枚，固然是選擇免費的證書啦。

  

  按照操做一步一步走，而後，而後你就獲得一個免費的 SSL 證書啦。

• **配置 HTTPS 和 HTTP2：**下面就開始配置 NGINX 了，先附上一篇 NGINX https幫組文檔。
  • 將下載的 SSL 放在服務器的目錄中，能夠根據我的習慣放入目錄，得方便找到
  • 配置 nginx，進行 nginx 配置和重定向以後，進行 nginx 重啓（nginx -s reload）,下面就是見證奇蹟的時刻了。須要注意的一點，若是出現警告，請把 SSL on 這行註釋掉就 OK 了。

• **驗證 HTTPS 和 HTTP2：**nginx 重啓以後，應該 ok 了，可是應該如何去驗證呢，下面有兩個方法

  1. 在控制檯輸入 window.chrome.loadTimes() 查看信息
  2. 安裝 chrome 插件HTTP/2 and SPDY indicator進行查看。

總結

至此 HTTP/2 的學習和搭建就完成，前端還有不少的優化內容要學習和去時間，優化不息，學習不止，感謝閱讀！

本文地址：HTTP 2.0 初體驗，更多信息能夠訪問個人我的網站，說不定有您想看的