CSS Sprite 最大的好處是：減少 HTTP 鏈接數(shù)。
頁(yè)面上的數(shù)據(jù)，通過(guò) TCP/IP 包傳輸。在 1M ADSL 環(huán)境下，網(wǎng)速最大值為 128 Kb/s, MTU(Maximum
Transmission Unit) 的大小默認(rèn)為 1500 bytes. 去掉 TCP/IP 的頭部信息 40 bytes, 一個(gè) package 可以容納的文件大小為 1460 bytes. 下面是一張示意圖：
需要的包越少，意味著速度越快。
例子：淘寶首頁(yè)有一張 sprite: hd_20090313.png, 大小為 5.71 KB (5848 bytes). 需要 5 個(gè)包來(lái)傳輸（5848 / 1460 = 4.005）。看數(shù)據(jù)，只多出了 8 bytes. 優(yōu)化到 5840 bytes 后，就可以減少一個(gè)傳輸包。
也許吹毛求疵了，但對(duì)于關(guān)鍵頁(yè)面，任何細(xì)節(jié)優(yōu)化，有時(shí)都是值得的。
類(lèi)似的，對(duì)于頁(yè)面中的鏈接數(shù)量，也可以考慮瀏覽器的最大并發(fā)數(shù)來(lái)做細(xì)節(jié)優(yōu)化。比如，在 Firefox 下，同一個(gè) host 的最大并發(fā)數(shù)為 6, 增加鏈接數(shù)對(duì)下載時(shí)間的影響如下：
當(dāng)鏈接數(shù)從 6 的整數(shù)倍增 1 時(shí)，下載時(shí)間明顯增大�？紤] IE6 最大并發(fā)數(shù)是 2, 減少鏈接數(shù)時(shí)，盡量減少到偶數(shù)，是一個(gè)不錯(cuò)的優(yōu)化守則。
參考資料
CSS Sprites: Image Slicing’s Kiss of Death
CSS, Image Sprites, Background Images and Website Optimization
PS: 出一道題目考考大家：CSS Sprite 的缺點(diǎn)是什么？
|
