那些年，克服延遲之道 · http2講解

3. 那些年，克服延遲之道

再困難的問題也有解決的方案，但這些方案卻良莠不齊。

3.1 Spriting

Spriting是一種將很多較小的圖片合并成一張大圖，再用JavaScript或者CSS將小圖重新“切割”出來的技術(shù)。

網(wǎng)站可以利用這一技巧來達(dá)到提速的目的——在HTTP 1.1里，下載一張大圖比下載100張小圖快得多。

但是當(dāng)某些頁面只需要顯示其中幾張小圖時(shí)，這種方案的缺點(diǎn)就凸顯出來了：它必須將整張大圖都從cache里取出，而不能將最頻繁使用的那些圖片保留在cache里。

3.2 內(nèi)聯(lián)（Inlining）

Inlining是另外一種防止發(fā)送很多小圖請(qǐng)求的技巧，它將圖片的原始數(shù)據(jù)嵌入在CSS文件里面的URL里。而這種方案的優(yōu)缺點(diǎn)跟Spriting很類似。

.icon1 {
    background: url(data:image/png;base64,<data>) no-repeat;
  }
.icon2 {
    background: url(data:image/png;base64,<data>) no-repeat;
  }

3.3 拼接（Concatenation）

大型網(wǎng)站往往會(huì)包含大量的JavaScript文件。一些前端工具可以幫助開發(fā)人員將這些文件合并為一個(gè)大的文件，從而讓瀏覽器能只花費(fèi)一個(gè)請(qǐng)求就將其下載完，而不是發(fā)無數(shù)請(qǐng)求去分別下載那些瑣碎的JavaScript文件。但凡事往往有利有弊，如果某頁面只需要其中一小部分代碼，它也必須下載完整的那份；而文件中一個(gè)小小的改動(dòng)也會(huì)造成大量數(shù)據(jù)的被重新下載。

這種方案也給開發(fā)者造成了很大的不便。

3.4 分片（Sharding）

最后一個(gè)我要說的性能優(yōu)化技術(shù)叫做Sharding。顧名思義，Sharding就是把你的服務(wù)分散在盡可能多的主機(jī)上。這種方案乍一聽比較奇怪，但是實(shí)際上在這背后卻蘊(yùn)藏了它獨(dú)辟蹊徑的道理！

最初的HTTP 1.1規(guī)范提到一個(gè)客戶端最多只能對(duì)同一主機(jī)建立兩個(gè)TCP連接。因此，為了不和規(guī)范沖突，一些聰明的網(wǎng)站使用了新的主機(jī)名，這樣的話，用戶就能和網(wǎng)站建立更多的連接，從而降低載入時(shí)間。

后來，兩個(gè)連接的限制被取消了，現(xiàn)在的客戶端可以輕松地和每個(gè)主機(jī)建立6-8個(gè)連接。但由于連接的上限依然存在，所以網(wǎng)站還是會(huì)用這種技術(shù)來提升連接的數(shù)量。而隨著資源個(gè)數(shù)的提升（上面章節(jié)的圖例），網(wǎng)站會(huì)需要更多的連接來保證HTTP協(xié)議的效率，從而提升載入速度。在現(xiàn)今的網(wǎng)站上，使用50甚至100個(gè)連接來打開一個(gè)頁面已經(jīng)并不罕見。根據(jù)httparchive.org的最新記錄顯示，在Top 30萬個(gè)URL中平均使用40（?。﹤€(gè)TCP連接來顯示頁面，而且這個(gè)數(shù)字仍然在緩慢的增長(zhǎng)中。

另外一個(gè)將圖片或者其他資源分發(fā)到不同主機(jī)的理由是可以不使用cookies，畢竟現(xiàn)今cookies的大小已經(jīng)非?？捎^了。無cookies的圖片服務(wù)器往往意味著更小的HTTP請(qǐng)求以及更好的性能！

下面的圖片展示了訪問一個(gè)瑞典著名網(wǎng)站的時(shí)產(chǎn)生的數(shù)據(jù)包，請(qǐng)注意這些請(qǐng)求是如何被分發(fā)到不同主機(jī)的。