用披薩來(lái)說(shuō)明當(dāng)你訂單數(shù)很大的時(shí)候 HTTP/2 是怎么打敗 HTTP/1.1 的。
在建立網(wǎng)站和應(yīng)用的方式上 HTTP/2 有些令人驚嘆的改變，在 HTTP/2 發(fā)布后的一年半，幾乎 10% 的網(wǎng)站使用了 HTTP/2。它絕對(duì)值得采用，但是這篇文章應(yīng)該首先推給使用 HTTP/2 的前端開(kāi)發(fā)者。這個(gè)連載的文章是指導(dǎo)前端開(kāi)發(fā)者怎么轉(zhuǎn)換到 HTTP/2。
本文涵蓋了 HTTP/2 對(duì) HTTP/1.1 來(lái)說(shuō)有什么提高的內(nèi)容，并且向前端開(kāi)發(fā)者介紹了 HTTP/2。
再次讓我想起什么是 HTTP ...
超文本傳輸協(xié)議，也就是 HTTP，這個(gè)協(xié)議決定了 web 內(nèi)容怎么傳輸。HTTP/1.1 在 1999 年被標(biāo)準(zhǔn)化，那時(shí)候的 web 和現(xiàn)在有很大的不同，表格霸占了整個(gè)網(wǎng)絡(luò)。樣式通常被內(nèi)聯(lián)在元素中，如果網(wǎng)站管理員更加的細(xì)致，他們會(huì)在頭部寫(xiě)個(gè) <style>標(biāo)簽。 JavaScript 也被丟在文檔里面，那時(shí)候完整的網(wǎng)站通常也不會(huì)超過(guò)幾頁(yè)。
HTTP/1.1 預(yù)計(jì)這種情況會(huì)持續(xù)一段時(shí)間，所以它并沒(méi)有太過(guò)關(guān)注在讓一個(gè)站點(diǎn)可以加載大量的資源方面，因?yàn)槟菚r(shí)候的開(kāi)發(fā)者并不需要這個(gè)。因此它使用了一個(gè)非常簡(jiǎn)單的方式來(lái)處理資源，你訪問(wèn)一個(gè)資源然后服務(wù)器去尋找它，并且返回你訪問(wèn)的資源，或者告訴你這個(gè)資源不存在。這種被叫作"線頭堵塞"方式非常高效，但是當(dāng)你需要多個(gè)資源的時(shí)候，這個(gè)進(jìn)程會(huì)依次尋找每個(gè)資源。這意味著在你訪問(wèn)第二個(gè)資源之前，服務(wù)器必須找到你訪問(wèn)的第一個(gè)資源并且載入它，或者告訴你沒(méi)找到。
大型站點(diǎn)的發(fā)展
在 1999 年之后的幾年里，隨著 php 和其他像 Rails 這樣的動(dòng)態(tài)語(yǔ)言的崛起，站點(diǎn)變得越來(lái)越復(fù)雜。css 文件也隨著向響應(yīng)式開(kāi)發(fā)的轉(zhuǎn)變而變的越來(lái)越大，因此像 Sass 這樣的可以創(chuàng)造一個(gè)簡(jiǎn)單的工作環(huán)境的 CSS 編譯器就應(yīng)運(yùn)而生。 JavaScript 也在 web 上有了更大的作用，它允許開(kāi)發(fā)者編寫(xiě)復(fù)雜的應(yīng)用，這曾經(jīng)只是 C++ 開(kāi)發(fā)人員的工作。隨著 Retina 和高清顯示屏的興起，也讓圖片變得更高清。隨著這些改變，文件大小呈現(xiàn)指數(shù)式的增長(zhǎng)，使得本來(lái)是等待幾個(gè)字節(jié)的資源變成了加載幾千字節(jié)，甚至在某些情況下有幾兆。當(dāng)你開(kāi)始載入頁(yè)面的其它東西前，必須先載入數(shù)百 K 的東西，你只能樂(lè)觀的假設(shè)你的用戶有很快的網(wǎng)絡(luò)接入。
想象 HTTP/1.1 是個(gè)過(guò)去的那種柜臺(tái)購(gòu)買式的街旁披薩店。你能自己過(guò)去并且預(yù)定一個(gè)雪碧和 2 片 Angry Hawaiian ，然后等待 3 分鐘。他們可以很容易地處理這些，實(shí)際上這是一個(gè)蓬勃發(fā)展的商業(yè)模式-定單簡(jiǎn)單、處理迅速。
然而，一旦你決定在同樣的披薩店主辦一場(chǎng)小區(qū)域的季度頒獎(jiǎng)典禮，事情就變的更復(fù)雜了。每個(gè)人都預(yù)定不同的東西，快速而雜亂無(wú)章讓等待時(shí)間直線上升。
哪里是 HTTP/2 的舞臺(tái)
HTTP/2 對(duì)前端開(kāi)發(fā)者主要的承諾就是復(fù)用。意思就是資源請(qǐng)求能發(fā)生在同一時(shí)間，并且服務(wù)器能馬上響應(yīng)這些資源。在請(qǐng)求之間沒(méi)有等待，因?yàn)樗鼈儼l(fā)生在同一時(shí)間。
使用同樣的比喻，HTTP/2 允許披薩店在餐館他們自己區(qū)域舉辦派對(duì)。派一個(gè)服務(wù)員接受訂單，并把所有已經(jīng)準(zhǔn)備好的訂單交付。當(dāng)其他人的比薩在制作的時(shí)候，你也不需要花 30 分鐘去等待你的雪碧，它們?cè)诘谝慌桓兜臇|西之中。這方式使得管理大量訂單更加簡(jiǎn)單，并且防止人們等他們的訂單時(shí)間太長(zhǎng)。
復(fù)用帶給我們的 web 開(kāi)發(fā)的大變化是改變了文件的加載方式。幫助繞過(guò)資源加載的 HTTP/1.1 瓶頸的方式是通過(guò)連接和壓縮需要被加載的文件。所有任務(wù)運(yùn)行器都默認(rèn)采取這樣的操作方式，或者需要作一點(diǎn)小設(shè)置就行。和過(guò)去一樣，開(kāi)發(fā)人員可以將圖像放在精靈拼圖sprite sheets中，這會(huì)減少了對(duì)服務(wù)器的請(qǐng)求數(shù)。
改進(jìn) HTTP/1.1
將文件連接起來(lái)是個(gè)處理 HTTP1.1 的請(qǐng)求限制問(wèn)題的非常聰明的方式，但是連接文件的主要問(wèn)題是它要求用戶第一次訪問(wèn)整個(gè)網(wǎng)站時(shí)下載所有的資源。一旦它們載入后，瀏覽器就會(huì)緩存所有的資源。這能提高用戶每次訪問(wèn)網(wǎng)頁(yè)時(shí)的速度，但是前期負(fù)載很重，對(duì)跳出率不利。此外，他們可能為所不訪問(wèn)的頁(yè)面加載資源。期望用戶訪問(wèn)每個(gè)頁(yè)面以查看每個(gè)樣式，并與每個(gè)腳本進(jìn)行交互是不現(xiàn)實(shí)的。此外，在加拿大和歐洲以及幾乎每個(gè)美國(guó)移動(dòng)提供商的地方，有每月的帶寬上限。不是加載額外的 54 千字節(jié)的內(nèi)容就會(huì)超過(guò)每月的流量限制，而是讓我們假設(shè)用戶想保留這些額外的流量看 Taylor Swift 的 gif。
使用 HTTP/2 和多路復(fù)用，您可以開(kāi)發(fā)一些最高效的網(wǎng)站，但它需要一些重新思考、甚至??撤銷之前的最佳做法。重復(fù)一次，我的目的是加快 HTTP/2 的會(huì)話，使用我們新的工具，我們可以發(fā)現(xiàn)這些新的最佳的做法。
在我的下一篇文章，《我將探索建設(shè)基于 HTTP/2 的網(wǎng)站的一些最好方式》。
轉(zhuǎn)自：https://linux.cn/article-8111-1.html
