作為一個(gè)經(jīng)常和web打交道的程序員膝舅，了解這些協(xié)議是必須的，本文就向大家介紹一下這些協(xié)議的區(qū)別和基本概念匾二，文中可能不局限于前端知識(shí)哮独，還包括一些運(yùn)維，協(xié)議方面的知識(shí)察藐，希望能給讀者帶來一些收獲皮璧，如有不對(duì)之處還請(qǐng)指出。
1.web始祖HTTP
全稱：超文本傳輸協(xié)議(HyperText Transfer Protocol) ，伴隨著計(jì)算機(jī)網(wǎng)絡(luò)和瀏覽器的誕生，HTTP1.0也隨之而來剿吻，處于計(jì)算機(jī)網(wǎng)絡(luò)中的應(yīng)用層吧秕，HTTP是建立在TCP協(xié)議之上惨寿，所以HTTP協(xié)議的瓶頸及其優(yōu)化技巧都是基于TCP協(xié)議本身的特性邦泄，例如tcp建立連接的3次握手和斷開連接的4次揮手以及每次建立連接帶來的RTT延遲時(shí)間删窒。
2.HTTP與現(xiàn)代化瀏覽器
早在HTTP建立之初裂垦，主要就是為了將超文本標(biāo)記語(yǔ)言(HTML)文檔從Web服務(wù)器傳送到客戶端的瀏覽器。也是說對(duì)于前端來說肌索，我們所寫的HTML頁(yè)面將要放在我們的web服務(wù)器上蕉拢，用戶端通過瀏覽器訪問url地址來獲取網(wǎng)頁(yè)的顯示內(nèi)容，但是到了WEB2.0以來诚亚，我們的頁(yè)面變得復(fù)雜晕换，不僅僅單純的是一些簡(jiǎn)單的文字和圖片，同時(shí)我們的HTML頁(yè)面有了CSS站宗，Javascript闸准，來豐富我們的頁(yè)面展示，當(dāng)ajax的出現(xiàn)梢灭，我們又多了一種向服務(wù)器端獲取數(shù)據(jù)的方法夷家，這些其實(shí)都是基于HTTP協(xié)議的。同樣到了移動(dòng)互聯(lián)網(wǎng)時(shí)代敏释，我們頁(yè)面可以跑在手機(jī)端瀏覽器里面库快，但是和PC相比，手機(jī)端的網(wǎng)絡(luò)情況更加復(fù)雜钥顽，這使得我們開始了不得不對(duì)HTTP進(jìn)行深入理解并不斷優(yōu)化過程中义屏。
3.HTTP的基本優(yōu)化
影響一個(gè)HTTP網(wǎng)絡(luò)請(qǐng)求的因素主要有兩個(gè)：帶寬和延遲。
- 帶寬：如果說我們還停留在撥號(hào)上網(wǎng)的階段蜂大，帶寬可能會(huì)成為一個(gè)比較嚴(yán)重影響請(qǐng)求的問題闽铐，但是現(xiàn)在網(wǎng)絡(luò)基礎(chǔ)建設(shè)已經(jīng)使得帶寬得到極大的提升，我們不再會(huì)擔(dān)心由帶寬而影響網(wǎng)速奶浦，那么就只剩下延遲了兄墅。
- 延遲：
1.瀏覽器阻塞（HOL blocking）：瀏覽器會(huì)因?yàn)橐恍┰蜃枞?qǐng)求。瀏覽器對(duì)于同一個(gè)域名财喳，同時(shí)只能有 4 個(gè)連接（這個(gè)根據(jù)瀏覽器內(nèi)核不同可能會(huì)有所差異）察迟，超過瀏覽器最大連接數(shù)限制，后續(xù)請(qǐng)求就會(huì)被阻塞耳高。
2.DNS 查詢（DNS Lookup）：瀏覽器需要知道目標(biāo)服務(wù)器的 IP 才能建立連接扎瓶。將域名解析為 IP 的這個(gè)系統(tǒng)就是 DNS。這個(gè)通趁谇梗可以利用DNS緩存結(jié)果來達(dá)到減少這個(gè)時(shí)間的目的概荷。
3.建立連接（Initial connection）：HTTP 是基于 TCP 協(xié)議的，瀏覽器最快也要在第三次握手時(shí)才能捎帶 HTTP 請(qǐng)求報(bào)文碌燕，達(dá)到真正的建立連接误证，但是這些連接無法復(fù)用會(huì)導(dǎo)致每次請(qǐng)求都經(jīng)歷三次握手和慢啟動(dòng)继薛。三次握手在高延遲的場(chǎng)景下影響較明顯，慢啟動(dòng)則對(duì)文件類大請(qǐng)求影響較大愈捅。
4.HTTP1.0和HTTP1.1的一些區(qū)別
HTTP1.0最早在網(wǎng)頁(yè)中使用是在1996年遏考，那個(gè)時(shí)候只是使用一些較為簡(jiǎn)單的網(wǎng)頁(yè)上和網(wǎng)絡(luò)請(qǐng)求上，而HTTP1.1則在1999年才開始廣泛應(yīng)用于現(xiàn)在的各大瀏覽器網(wǎng)絡(luò)請(qǐng)求中蓝谨，同時(shí)HTTP1.1也是當(dāng)前使用最為廣泛的HTTP協(xié)議灌具。 主要區(qū)別主要體現(xiàn)在：
1.緩存處理
- 在HTTP1.0中主要使用header里的If-Modified-Since,Expires來做為緩存判斷的標(biāo)準(zhǔn)。
- HTTP1.1則引入了更多的緩存控制策略例如Entity tag譬巫，If-Unmodified-Since, If-Match, If-None-Match等更多可供選擇的緩存頭來控制緩存策略咖楣。
2.帶寬優(yōu)化及網(wǎng)絡(luò)連接的使用
HTTP1.0中，存在一些浪費(fèi)帶寬的現(xiàn)象芦昔，例如客戶端只是需要某個(gè)對(duì)象的一部分诱贿，而服務(wù)器卻將整個(gè)對(duì)象送過來了，并且不支持?jǐn)帱c(diǎn)續(xù)傳功能咕缎。
HTTP1.1則在請(qǐng)求頭引入了range頭域珠十，它允許只請(qǐng)求資源的某個(gè)部分，即返回碼是206（Partial Content）锨阿，這樣就方便了開發(fā)者自由的選擇以便于充分利用帶寬和連接宵睦。
3.錯(cuò)誤通知的管理
- 在HTTP1.1中新增了24個(gè)錯(cuò)誤狀態(tài)響應(yīng)碼，如409（Conflict）表示請(qǐng)求的資源與資源的當(dāng)前狀態(tài)發(fā)生沖突墅诡；410（Gone）表示服務(wù)器上的某個(gè)資源被永久性的刪除壳嚎。
4.Host頭處理
- 在HTTP1.0中認(rèn)為每臺(tái)服務(wù)器都綁定一個(gè)唯一的IP地址，因此末早，請(qǐng)求消息中的URL并沒有傳遞主機(jī)名（hostname）烟馅。但隨著虛擬主機(jī)技術(shù)的發(fā)展，在一臺(tái)物理服務(wù)器上可以存在多個(gè)虛擬主機(jī)（Multi-homed Web Servers）然磷，并且它們共享一個(gè)IP地址郑趁。
- HTTP1.1的請(qǐng)求消息和響應(yīng)消息都應(yīng)支持Host頭域，且請(qǐng)求消息中如果沒有Host頭域會(huì)報(bào)告一個(gè)錯(cuò)誤（400 Bad Request）姿搜。
5.長(zhǎng)連接
- HTTP 1.1支持長(zhǎng)連接（PersistentConnection）和請(qǐng)求的流水線（Pipelining）處理寡润，在一個(gè)TCP連接上可以傳送多個(gè)HTTP請(qǐng)求和響應(yīng)，減少了建立和關(guān)閉連接的消耗和延遲舅柜。
- 在HTTP1.1中默認(rèn)開啟Connection： keep-alive梭纹，一定程度上彌補(bǔ)了HTTP1.0每次請(qǐng)求都要?jiǎng)?chuàng)建連接的缺點(diǎn)。以下是常見的HTTP1.0：
區(qū)別用一張圖來體現(xiàn)：
5.HTTP1.0和1.1現(xiàn)存的一些問題
1.上面提到過的致份，HTTP1.x在傳輸數(shù)據(jù)時(shí)变抽，每次都需要重新建立連接，無疑增加了大量的延遲時(shí)間，特別是在移動(dòng)端更為突出绍载。
2.HTTP1.x在傳輸數(shù)據(jù)時(shí)诡宗，所有傳輸?shù)膬?nèi)容都是明文，客戶端和服務(wù)器端都無法驗(yàn)證對(duì)方的身份击儡，這在一定程度上無法保證數(shù)據(jù)的安全性塔沃。
3.HTTP1.x在使用時(shí)，header里攜帶的內(nèi)容過大曙痘，在一定程度上增加了傳輸?shù)某杀?/strong>芳悲，并且每次請(qǐng)求header基本不怎么變化立肘，尤其在移動(dòng)端增加用戶流量边坤。
4.雖然HTTP1.x支持了keep-alive，來彌補(bǔ)多次創(chuàng)建連接產(chǎn)生的延遲谅年，但是keep-alive使用多了同樣會(huì)給服務(wù)端帶來大量的性能壓力茧痒，并且對(duì)于單個(gè)文件被不斷請(qǐng)求的服務(wù)(例如圖片存放網(wǎng)站)，keep-alive可能會(huì)極大的影響性能融蹂，因?yàn)樗谖募徽?qǐng)求之后還保持了不必要的連接很長(zhǎng)時(shí)間旺订。
6.HTTPS應(yīng)聲而出
為了解決以上問題，網(wǎng)景在1994年創(chuàng)建了HTTPS超燃，并應(yīng)用在網(wǎng)景導(dǎo)航者瀏覽器中区拳。 最初，HTTPS是與SSL一起使用的意乓；在SSL逐漸演變到TLS時(shí)（其實(shí)兩個(gè)是一個(gè)東西樱调，只是名字不同而已），最新的HTTPS也由在2000年五月公布的RFC 2818正式確定下來届良。
簡(jiǎn)單來說笆凌，HTTPS就是安全版的HTTP，并且由于當(dāng)今時(shí)代對(duì)安全性要求更高士葫，chrome和firefox都大力支持網(wǎng)站使用HTTPS乞而，蘋果也在ios 10系統(tǒng)中強(qiáng)制app使用HTTPS來傳輸數(shù)據(jù)，由此可見HTTPS勢(shì)在必行慢显。
7.HTTPS與HTTP的一些區(qū)別
1.HTTPS協(xié)議需要到CA申請(qǐng)證書爪模，一般免費(fèi)證書很少，需要交費(fèi)荚藻。
2.HTTP協(xié)議運(yùn)行在TCP之上屋灌，所有傳輸?shù)膬?nèi)容都是明文，HTTPS運(yùn)行在SSL/TLS之上鞋喇，SSL/TLS運(yùn)行在TCP之上声滥，所有傳輸?shù)膬?nèi)容都經(jīng)過加密的。
3.HTTP和HTTPS使用的是完全不同的連接方式，用的端口也不一樣落塑，前者是80纽疟，后者是443。
4.HTTPS可以有效的防止運(yùn)營(yíng)商劫持憾赁，解決了防劫持的一個(gè)大問題污朽。
8.HTTPS改造
如果一個(gè)網(wǎng)站要全站由HTTP替換成HTTPS，可能需要關(guān)注以下幾點(diǎn)：
1.安裝CA證書龙考，一般的證書都是需要收費(fèi)的蟆肆，這邊推薦一個(gè)比較好的購(gòu)買證書網(wǎng)站：
1）Let’s Encrypt，免費(fèi)晦款，快捷炎功，支持多域名（不是通配符），三條命令即時(shí)簽署+導(dǎo)出證書缓溅。缺點(diǎn)是暫時(shí)只有三個(gè)月有效期蛇损，到期需續(xù)簽。
2）Comodo PositiveSSL坛怪，收費(fèi)淤齐，但是比較穩(wěn)定。
2.在購(gòu)買證書之后袜匿，在證書提供的網(wǎng)站上配置自己的域名更啄，將證書下載下來之后，配置自己的web服務(wù)器居灯，同時(shí)進(jìn)行代碼改造祭务。
3.HTTPS 降低用戶訪問速度。SSL握手穆壕，HTTPS 對(duì)速度會(huì)有一定程度的降低待牵，但是只要經(jīng)過合理優(yōu)化和部署，HTTPS 對(duì)速度的影響完全可以接受喇勋。在很多場(chǎng)景下缨该，HTTPS 速度完全不遜于 HTTP，如果使用 SPDY川背，HTTPS 的速度甚至還要比 HTTP 快贰拿。
4.相對(duì)于HTTPS降低訪問速度，其實(shí)更需要關(guān)心的是服務(wù)器端的CPU壓力熄云，HTTPS中大量的密鑰算法計(jì)算膨更，會(huì)消耗大量的CPU資源，只有足夠的優(yōu)化缴允，HTTPS 的機(jī)器成本才不會(huì)明顯增加荚守。
推薦一則淘寶網(wǎng)改造HTTPS的文章珍德。
9.使用SPDY加快你的網(wǎng)站速度
2012年google如一聲驚雷提出了SPDY的方案，大家才開始從正面看待和解決老版本HTTP協(xié)議本身的問題矗漾，SPDY可以說是綜合了HTTPS和HTTP兩者有點(diǎn)于一體的傳輸協(xié)議锈候，主要解決：
1.降低延遲，針對(duì)HTTP高延遲的問題敞贡，SPDY優(yōu)雅的采取了多路復(fù)用（multiplexing）泵琳。多路復(fù)用通過多個(gè)請(qǐng)求stream共享一個(gè)tcp連接的方式，解決了HOL blocking的問題誊役，降低了延遲同時(shí)提高了帶寬的利用率获列。
2.請(qǐng)求優(yōu)先級(jí)（request prioritization）。多路復(fù)用帶來一個(gè)新的問題是蛔垢，在連接共享的基礎(chǔ)之上有可能會(huì)導(dǎo)致關(guān)鍵請(qǐng)求被阻塞击孩。SPDY允許給每個(gè)request設(shè)置優(yōu)先級(jí)，這樣重要的請(qǐng)求就會(huì)優(yōu)先得到響應(yīng)啦桌。比如瀏覽器加載首頁(yè)溯壶，首頁(yè)的html內(nèi)容應(yīng)該優(yōu)先展示，之后才是各種靜態(tài)資源文件甫男，腳本文件等加載，這樣可以保證用戶能第一時(shí)間看到網(wǎng)頁(yè)內(nèi)容验烧。
3.header壓縮板驳。前面提到HTTP1.x的header很多時(shí)候都是重復(fù)多余的。選擇合適的壓縮算法可以減小包的大小和數(shù)量碍拆。
4.基于HTTPS的加密協(xié)議傳輸若治，大大提高了傳輸數(shù)據(jù)的可靠性。
5.服務(wù)端推送（server push）感混，采用了SPDY的網(wǎng)頁(yè)端幼，例如我的網(wǎng)頁(yè)有一個(gè)sytle.css的請(qǐng)求，在客戶端收到sytle.css數(shù)據(jù)的同時(shí)弧满，服務(wù)端會(huì)將sytle.js的文件推送給客戶端婆跑，當(dāng)客戶端再次嘗試獲取sytle.js時(shí)就可以直接從緩存中獲取到，不用再發(fā)請(qǐng)求了庭呜。SPDY構(gòu)成圖：
SPDY位于HTTP之下滑进，TCP和SSL之上，這樣可以輕松兼容老版本的HTTP協(xié)議(將HTTP1.x的內(nèi)容封裝成一種新的frame格式)募谎，同時(shí)可以使用已有的SSL功能扶关。
兼容性：
10.HTTP2.0的前世今生
顧名思義有了HTTP1.x，那么HTTP2.0也就順理成章的出現(xiàn)了数冬。HTTP2.0可以說是SPDY的升級(jí)版（其實(shí)原本也是基于SPDY設(shè)計(jì)的）节槐，但是，HTTP2.0 跟 SPDY 仍有不同的地方，主要是以下兩點(diǎn)：
- HTTP2.0 支持明文 HTTP 傳輸铜异，而 SPDY 強(qiáng)制使用 HTTPS
- HTTP2.0 消息頭的壓縮算法采用 HPACK地来，而非 SPDY 采用的 DEFLATE
11.HTTP2.0的新特性
- 新的二進(jìn)制格式（Binary Format），HTTP1.x的解析是基于文本熙掺∥窗撸基于文本協(xié)議的格式解析存在天然缺陷，文本的表現(xiàn)形式有多樣性币绩，要做到健壯性考慮的場(chǎng)景必然很多蜡秽，二進(jìn)制則不同，只認(rèn)0和1的組合缆镣⊙客唬基于這種考慮HTTP2.0的協(xié)議解析決定采用二進(jìn)制格式，實(shí)現(xiàn)方便且健壯董瞻。
- 多路復(fù)用（MultiPlexing）寞蚌，即連接共享，即每一個(gè)request都是是用作連接共享機(jī)制的钠糊。一個(gè)request對(duì)應(yīng)一個(gè)id挟秤，這樣一個(gè)連接上可以有多個(gè)request，每個(gè)連接的request可以隨機(jī)的混雜在一起抄伍，接收方可以根據(jù)request的 id將request再歸屬到各自不同的服務(wù)端請(qǐng)求里面艘刚。多路復(fù)用原理圖：
- header壓縮，如上文中所言截珍，對(duì)前面提到過HTTP1.x的header帶有大量信息攀甚，而且每次都要重復(fù)發(fā)送，HTTP2.0使用encoder來減少需要傳輸?shù)膆eader大小岗喉，通訊雙方各自cache一份header fields表秋度，既避免了重復(fù)header的傳輸，又減小了需要傳輸?shù)拇笮?/em>钱床。
- 服務(wù)端推送（server push）荚斯，同SPDY一樣，HTTP2.0也具有server push功能诞丽。目前鲸拥，有大多數(shù)網(wǎng)站已經(jīng)啟用HTTP2.0，例如YouTuBe僧免，淘寶網(wǎng)等網(wǎng)站刑赶，利用chrome控制臺(tái)可以查看是否啟用H2：
更多關(guān)于HTTP2的問題可以參考：HTTP2奇妙日常，以及HTTP2.0的官方網(wǎng)站懂衩。
關(guān)于HTTP2和HTTP1.x的區(qū)別大致可以看下圖：
12.HTTP2.0的升級(jí)改造
對(duì)比HTTPS的升級(jí)改造撞叨，HTTP2.0或許會(huì)稍微簡(jiǎn)單一些金踪，你可能需要關(guān)注以下問題：
1.前文說了HTTP2.0其實(shí)可以支持非HTTPS的，但是現(xiàn)在主流的瀏覽器像chrome牵敷，firefox表示還是只支持基于 TLS 部署的HTTP2.0協(xié)議胡岔，所以要想升級(jí)成HTTP2.0還是先升級(jí)HTTPS為好。
2.當(dāng)你的網(wǎng)站已經(jīng)升級(jí)HTTPS之后枷餐，那么升級(jí)HTTP2.0就簡(jiǎn)單很多靶瘸，如果你使用NGINX，只要在配置文件中啟動(dòng)相應(yīng)的協(xié)議就可以了毛肋，可以參考NGINX白皮書怨咪，NGINX配置HTTP2.0官方指南。
3.使用了HTTP2.0那么润匙，原本的HTTP1.x怎么辦诗眨，這個(gè)問題其實(shí)不用擔(dān)心，HTTP2.0完全兼容HTTP1.x的語(yǔ)義孕讳，對(duì)于不支持HTTP2.0的瀏覽器匠楚，NGINX會(huì)自動(dòng)向下兼容的。
后記
1.以上就是關(guān)于HTTP,HTTP2.0,SPDY,HTTPS的一些基本理論厂财，有些內(nèi)容沒有深入講解芋簿，大家可以跟進(jìn)參考連接具體查看。
2.關(guān)于HTTP1.x的一些優(yōu)化方式蟀苛，例如文件合并壓縮益咬，資源cdn，js帜平，css優(yōu)化等等同樣使用與HTTP2.0和HTTPS，所以web前端的優(yōu)化梅鹦，還是要繼續(xù)進(jìn)行裆甩。
3.其實(shí)WEB發(fā)展如此迅速的今天，有些技術(shù)是真的要與時(shí)俱進(jìn)的齐唆，就像蘋果宣布ios 10必須使用HTTPS開始嗤栓，關(guān)于web協(xié)議革新就已經(jīng)開始了，為了更好的性能箍邮，更優(yōu)越的方式茉帅，現(xiàn)在就開始升級(jí)改造吧
參考資料：
轉(zhuǎn)自：http://www.alloyteam.com/2016/07/httphttp2-0spdyhttps-reading-this-is-enough/
