那些年，克服延遲之道

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

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

3.1. Spriting

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

網(wǎng)站可以用該技術(shù)來(lái)提速：在HTTP 1.1里，下載一張大圖比下載100張小圖快得多。

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

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

內(nèi)聯(lián)是另外一種防止發(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文件。一些前端工具能幫助開(kāi)發(fā)人員將這些文件合并為一個(gè)大的文件，從而讓瀏覽器能通過(guò)一個(gè)請(qǐng)求下載完，而不是發(fā)無(wú)數(shù)請(qǐng)求來(lái)分別下載那些小的JavaScript。但如果某頁(yè)面只需要其中一小部分代碼，它也必須下載完整的那份。而一個(gè)小小的文件改動(dòng)也會(huì)造成大量數(shù)據(jù)的重載。

這種手段也給開(kāi)發(fā)者造成了很大的不便。

3.4 分片（Sharding）

最后一個(gè)我要說(shuō)的性能優(yōu)化技術(shù)叫做分片。顧名思義，分片就是把你的服務(wù)分散在盡可能多的主機(jī)上。這種方案乍一聽(tīng)比較奇怪，但是實(shí)際上在它背后卻有非常深刻的道理！

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

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

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

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