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左右。

所以，還是建議讀一下之前翻譯的《CSS雪碧:要還是不要？》。

總結：

• 雪碧圖的尺寸要最佳化好，空白儘可能少；
• 及時清理不再使用的圖片；
• 將雪碧圖權重做分離，全域/架構級的和局部/模組層級的分離開；
• 緩衝設定和更新頻率匹配，如果將每天更新的雪碧圖的緩衝設定到一個月很容易出問題的。

PS：自從用了CSSGaga的自動合并雪碧圖功能後，再也不用為製作/更新雪碧圖操心了。。。

原文來至：http://www.qianduan.net/css-sprite-diagram-occupied-by-the-memory-of-too-many-browser.html