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

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

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

3.1 Spriting

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

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

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

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

Inlining是另外一種防止發(fā)送很多小圖請求的技巧，它將圖片的原始數(shù)據(jù)嵌入在CSS文件里面的URL里。而這種方案的優(yōu)缺點跟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)站往往會包含大量的JavaScript文件。一些前端工具可以幫助開發(fā)人員將這些文件合并為一個大的文件，從而讓瀏覽器能只花費一個請求就將其下載完，而不是發(fā)無數(shù)請求去分別下載那些瑣碎的JavaScript文件。但凡事往往有利有弊，如果某頁面只需要其中一小部分代碼，它也必須下載完整的那份；而文件中一個小小的改動也會造成大量數(shù)據(jù)的被重新下載。

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

3.4 分片（Sharding）

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

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

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

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

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