# 3. 那些年，克服延遲之道 再困難的問題也有解決的方案，但這些方案卻良莠不齊。 ## 3.1. Spriting Spriting是一種將很多較小的圖片合并成一張大圖，再用JavaScript或者CSS將小圖重新“切割”出來的技術。 網站可以用該技術來提速：在HTTP 1.1里，下載一張大圖比下載100張小圖快得多。  但是當某些頁面只需要顯示其中幾張小圖時，這種方案的缺點就凸顯出來了：它必須將整張大圖都從cache里取出，而不能將最頻繁使用的那些圖片保留在cache里。 ## 3.2. 內聯（Inlining） 內聯是另外一種防止發送很多小圖請求的技巧，它將圖片的原始數據嵌入在CSS文件里面的URL里。而這種方案的優缺點跟Spriting很類似。 ~~~ .icon1 { background: url(data:image/png;base64,<data>) no-repeat; } .icon2 { background: url(data:image/png;base64,<data>) no-repeat; } ~~~ ## 3.3. 拼接（Concatenation） 大型網站往往會包含大量的JavaScript文件。一些前端工具能幫助開發人員將這些文件合并為一個大的文件，從而讓瀏覽器能通過一個請求下載完，而不是發無數請求來分別下載那些小的JavaScript。但如果某頁面只需要其中一小部分代碼，它也必須下載完整的那份。而一個小小的文件改動也會造成大量數據的重載。 這種手段也給開發者造成了很大的不便。 ## 3.4 分片（Sharding） 最后一個我要說的性能優化技術叫做分片。顧名思義，分片就是把你的服務分散在盡可能多的主機上。這種方案乍一聽比較奇怪，但是實際上在它背后卻有非常深刻的道理！ 最初的HTTP 1.1規范提到一個客戶端最多只能對同一主機建立兩個TCP連接。因此，為了不和規范沖突，一些聰明的網站使用了新的主機名。這樣的話，用戶就能和網站建立更多的連接，從而降低載入時間。 后來，兩個連接的限制被取消了，現在的客戶端可以輕松地和每個主機建立6-8個連接。但連接的上限卻是依然存在的，所以網站依然會用這種技術來提升連接的數量。隨著資源個數的提升（上面章節的圖例），網站需要更多的連接來保證HTTP協議的效率，從而提升載入速度。在現今的網站上，使用50甚至100個連接來打開一個頁面并不罕見。[httparchive.org](http://httparchive.org)的最新記錄顯示，在Top 30萬個URL中平均使用38(!)個TCP連接來顯示頁面。并且這個數字仍然在緩慢的增長。 另外一個將圖片或者其他資源分發到不同主機的理由是可以不使用cookies，畢竟現今cookies的大小已經非常可觀了。無cookies的圖片服務器意味著更小的HTTP請求和更好的性能！ 下面的圖片展示了訪問一個瑞典著名網站的時候的數據包，請注意這些請求是如何被分發到不同主機的。