DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS雪碧圖的尺寸要優化好將雪碧圖權重做分離
CSS雪碧圖的尺寸要優化好將雪碧圖權重做分離
編輯:CSS進階教程     

可能是某篇微博的關系,今天有人來評論說,使用雪碧圖,內存會暴漲的。。。這個問題討論的也蠻多了,那,到底,使用雪碧圖後,會占用很多內存嗎?

實驗:

下午做了個簡單的實驗,用99個128px*128px的png 32圖片,寫了三個頁面來做測試:

  • 只用img標簽調用;
  • 用css分別調用每個png圖片做背景;
  • 使用雪碧圖做背景

然後分別用Chrome、IE6/7/8/9、Firefox做測試,具體的數據我這裡就不詳細列了,感興趣的話可以自測一下。

結論:

在各浏覽器下,三個頁面占用的內存相當,只有很小的差異,Chrome下,雪碧圖占用內存略少一點點兒,IE下略多一點點兒。。。

包括mouseover等交互事件,對浏覽器內存也沒什麼影響,只是會影響CPU占用率——這個即便純色背景色都會在事件觸發時提高CPU占用率的。。。

所以,雪碧圖的真正問題是利用率的問題,如大貓所說,如果你雪碧圖中合並了10個icon,結果實際只使用了3個,那才是浪費了內存。

其實,圖片在浏覽器中占用的內存是可以計算的:透明的圖片,內存占用是長*寬*4,不透明圖片占用是長*寬*3,比如第三個例子中的雪碧圖大小是12770*128,它在浏覽器中占用內存是12770*128*4=6.23MB左右。

總結:

  • 雪碧圖的尺寸要優化好,空白盡可能少;
  • 及時清理不再使用的圖片;
  • 將雪碧圖權重做分離,全局/框架級的和局部/模塊級的分離開;
  • 緩存設定和更新頻率匹配,如果將每天更新的雪碧圖的緩存設置到一個月很容易出問題的。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved