可能是某篇微博的關系,今天有人來評論說,使用雪碧圖,內存會暴漲的。。。這個問題討論的也蠻多了,那,到底,使用雪碧圖後,會占用很多內存嗎?
下午做了個簡單的實驗,用99個128px*128px的png 32圖片,寫了三個頁面來做測試:
然後分別用Chrome、IE6/7/8/9、Firefox做測試,具體的數據我這裡就不詳細列了,感興趣的話可以自測一下。
在各浏覽器下,三個頁面占用的內存相當,只有很小的差異,Chrome下,雪碧圖占用內存略少一點點兒,IE下略多一點點兒。。。
包括mouseover等交互事件,對浏覽器內存也沒什麼影響,只是會影響CPU占用率——這個即便純色背景色都會在事件觸發時提高CPU占用率的。。。
所以,雪碧圖的真正問題是利用率的問題,如大貓所說,如果你雪碧圖中合並了10個icon,結果實際只使用了3個,那才是浪費了內存。
其實,圖片在浏覽器中占用的內存是可以計算的:透明的圖片,內存占用是長*寬*4,不透明圖片占用是長*寬*3,比如第三個例子中的雪碧圖大小是12770*128,它在浏覽器中占用內存是12770*128*4=6.23MB左右。