作為一個經常和web打交道的程式設計師，瞭解這些協議是必須的，本文就向大家介紹一下這些協議的區別和基本概念，文中可能不侷限於前端知識，還包括一些運維，協議方面的知識，希望能給讀者帶來一些收穫，如有不對之處還請指出。

1. HTTP1.0

web始祖HTTP

HTTP全稱：超文字傳輸協議(HyperText Transfer Protocol) 伴隨著計算機網路和瀏覽器的誕生，HTTP1.0也隨之而來，處於計算機網路中的應用層.

HTTP是建立在TCP協議之上，所以HTTP協議的瓶頸及其優化技巧都是基於TCP協議本身的特性，例如tcp建立連線的3次握手和斷開連線的4次揮手以及每次建立連線帶來的RTT延遲時間。

2.HTTP與現代化瀏覽器

早在HTTP建立之初，主要就是為了將超文字標記語言(HTML)文件從Web伺服器傳送到客戶端的瀏覽器。也是說對於前端來說，我們所寫的HTML頁面將要放在我們的web伺服器上，使用者端通過瀏覽器訪問url地址來獲取網頁的顯示內容.

但是到了WEB2.0以來，我們的頁面變得複雜，不僅僅單純的是一些簡單的文字和圖片，同時我們的HTML頁面有了CSS，Javascript，來豐富我們的頁面展示，當ajax的出現，我們又多了一種向伺服器端獲取資料的方法，這些其實都是基於HTTP協議的，同樣到了移動網際網路時代，我們頁面可以跑在手機端瀏覽器裡面，但是和PC相比，手機端的網路情況更加複雜，這使得我們開始了不得不對HTTP進行深入理解並不斷優化過程中。

2. HTTP1.1

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

頻寬：如果說我們還停留在撥號上網的階段，頻寬可能會成為一個比較嚴重影響請求的問題，但是現在網路基礎建設已經使得頻寬得到極大的提升，我們不再會擔心由頻寬而影響網速，那麼就只剩下延遲了。

延遲：

1、瀏覽器阻塞（HOL blocking）：瀏覽器會因為一些原因阻塞請求。瀏覽器對於同一個域名，同時只能有 4 個連線（這個根據瀏覽器核心不同可能會有所差異），超過瀏覽器最大連線數限制，後續請求就會被阻塞。

2、DNS 查詢（DNS Lookup）：瀏覽器需要知道目標伺服器的 IP 才能建立連線。將域名解析為 IP 的這個系統就是 DNS。這個通常可以利用DNS快取結果來達到減少這個時間的目的。

3、建立連線（Initial connection）：HTTP 是基於 TCP 協議的，瀏覽器最快也要在第三次握手時才能捎帶 HTTP 請求報文，達到真正的建立連線，但是這些連線無法複用會導致每次請求都經歷三次握手和慢啟動。三次握手在高延遲的場景下影響較明顯，慢啟動則對檔案類大請求影響較大。

      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和1.1現存的一些問題

1、上面提到過的，HTTP1.x在傳輸資料時，每次都需要重新建立連線，無疑增加了大量的延遲時間，特別是在移動端更為突出。

2、HTTP1.x在傳輸資料時，所有傳輸的內容都是明文，客戶端和伺服器端都無法驗證對方的身份，這在一定程度上無法保證資料的安全性。

3、HTTP1.x在使用時，header裡攜帶的內容過大，在一定程度上增加了傳輸的成本，並且每次請求header基本不怎麼變化，尤其在移動端增加使用者流量。

4、雖然HTTP1.x支援了keep-alive，來彌補多次建立連線產生的延遲，但是keep-alive使用多了同樣會給服務端帶來大量的效能壓力，並且對於單個檔案被不斷請求的服務(例如圖片存放網站)，keep-alive可能會極大的影響效能，因為它在檔案被請求之後還保持了不必要的連線很長時間。

3. HTTPS

為了解決以上問題，網景在1994年建立了HTTPS，並應用在網景導航者瀏覽器中。

最初，HTTPS是與SSL一起使用的；在SSL逐漸演變到TLS時（其實兩個是一個東西，只是名字不同而已），最新的HTTPS也由在2000年五月公佈的RFC 2818正式確定下來。

簡單來說，HTTPS就是安全版的HTTP，並且由於當今時代對安全性要求更高，chrome和firefox都大力支援網站使用HTTPS，蘋果也在ios 10系統中強制app使用HTTPS來傳輸資料，由此可見HTTPS勢在必行。

HTTPS與HTTP的一些區別

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 的機器成本才不會明顯增加。

使用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、基於HTTPS的加密協議傳輸，大大提高了傳輸資料的可靠性。

5、服務端推送（server push），採用了SPDY的網頁，例如我的網頁有一個sytle.css的請求，在客戶端收到sytle.css資料的同時，服務端會將sytle.js的檔案推送給客戶端，當客戶端再次嘗試獲取sytle.js時就可以直接從快取中獲取到，不用再發請求了。SPDY構成圖：

SPDY位於HTTP之下，TCP和SSL之上，這樣可以輕鬆相容老版本的HTTP協議(將HTTP1.x的內容封裝成一種新的frame格式)，同時可以使用已有的SSL功能。

相容性：

4. HTTP2.0

顧名思義有了HTTP1.x，那麼HTTP2.0也就順理成章的出現了。

HTTP2.0可以說是SPDY的升級版（其實原本也是基於SPDY設計的），但是，HTTP2.0 跟 SPDY 仍有不同的地方，主要是以下兩點：

HTTP2.0 支援明文 HTTP 傳輸，而 SPDY 強制使用 HTTPS
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和HTTP1.x的區別大致可以看下圖：

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協議革新就已經開始了，為了更好的效能，更優越的方式，現在就開始升級改造吧

參考資料：