武林網(wǎng)(www.survivalescaperooms.com)文章簡介：CSS sprites 是網(wǎng)站速度的優(yōu)化很重要的一環(huán)，但也有其對(duì)性能的不利之處。

CSS sprites 是網(wǎng)站速度的優(yōu)化很重要的一環(huán)，但也有其對(duì)性能的不利之處。

Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到：

CSS sprites 的最大問題是內(nèi)存占用。非精確構(gòu)造的 sprite 圖片會(huì)占用意想不到的內(nèi)存空間。以 WHIT TV 網(wǎng)站為例，這里是一張 sprite 圖片，1299x15,000 的png，已經(jīng)經(jīng)過很好的壓縮，實(shí)際下載大小只有26K左右，但是瀏覽器不會(huì)轉(zhuǎn)換壓縮的圖像數(shù)據(jù)。當(dāng)圖片下載并解壓，將耗費(fèi)75MB內(nèi)存(1299 * 15000 * 4)。如果圖片沒有阿爾法透明，可能會(huì)減小到1299 * 15000 * 3，可往往還是犧牲了渲染速度。即便如此，我們占用了55MB內(nèi)存。這張圖片絕大部分是空白的，什么都沒有，沒有什么有用的內(nèi)容。僅僅因?yàn)檫@張圖片，當(dāng)瀏覽器只加載WHIT 主頁時(shí)會(huì)增加75+MB內(nèi)存。

Mozilla Web Development Blog 在《 Use Sprites Wisely》中總結(jié)道：

簡而言之，即使是很小的 sprite 圖片也有可能吃掉大量的系統(tǒng)內(nèi)存 -- 每個(gè)頁面50M甚至100M或者更多。速度雖然至關(guān)重要，但要意識(shí)到 sprite 及其他 hacks 同樣會(huì)影響用戶體驗(yàn)。

現(xiàn)在再回過頭看之前的《Yahoo與Gmail的CSS Sprites對(duì)比》，綜合性能方面 Gmail 無疑占了上風(fēng)。當(dāng)然，這些只是前端層面的優(yōu)化，從根源上來看，設(shè)計(jì)師用最少的圖片來實(shí)現(xiàn)最優(yōu)的效果才是王道。

正如雅虎女工程師 Nicole Sullivan 在 Velocity 2009 大會(huì)演講 PPT 《The Fast And The Fabulous》所提到的：

consistent design = clean code = fast site（一致的設(shè)計(jì) = 更干凈的代碼 = 更快的網(wǎng)站）