網頁制作Poluoluo文章簡介:CSS sprites 是網站速度的優化很重要的一環,但也有其對性能的不利之處。
CSS sprites 是網站速度的優化很重要的一環,但也有其對性能的不利之處。
Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到:
CSS sprites 的最大問題是內存占用。非精確構造的 sprite 圖片會占用意想不到的內存空間。以 WHIT TV 網站為例,這裡是一張 sprite 圖片,1299x15,000 的png,已經經過很好的壓縮,實際下載大小只有26K左右,但是浏覽器不會轉換壓縮的圖像數據。當圖片下載並解壓,將耗費75MB內存(1299 * 15000 * 4)。如果圖片沒有阿爾法透明,可能會減小到1299 * 15000 * 3,可往往還是犧牲了渲染速度。即便如此,我們占用了55MB內存。這張圖片絕大部分是空白的,什麼都沒有,沒有什麼有用的內容。僅僅因為這張圖片,當浏覽器只加載WHIT 主頁時會增加75+MB內存。
Mozilla Web Development Blog 在《 Use Sprites Wisely》中總結道:
簡而言之,即使是很小的 sprite 圖片也有可能吃掉大量的系統內存 -- 每個頁面50M甚至100M或者更多。速度雖然至關重要,但要意識到 sprite 及其他 hacks 同樣會影響用戶體驗。
現在再回過頭看之前的《Yahoo與Gmail的CSS Sprites對比》,綜合性能方面 Gmail 無疑占了上風。當然,這些只是前端層面的優化,從根源上來看,設計師用最少的圖片來實現最優的效果才是王道。
正如雅虎女工程師 Nicole Sullivan 在 Velocity 2009 大會演講 PPT 《The Fast And The Fabulous》所提到的:
consistent design = clean code = fast site(一致的設計 = 更干淨的代碼 = 更快的網站)