CSS雪碧图会占用太多浏览器内存吗?
浏览:3165次 出处信息
可能是某篇微博的关系,今天有人来评论说,使用雪碧图,内存会暴涨的。。。这个问题讨论的也蛮多了,那,到底,使用雪碧图后,会占用很多内存吗?
实验:
下午做了个简单的实验,用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左右。
所以,还是建议读一下之前翻译的《CSS雪碧:要还是不要?》。
总结:
PS:自从用了CSSGaga的自动合并雪碧图功能后,再也不用为制作/更新雪碧图操心了。。。
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:Tip中的指示箭头实现
后一篇:OverFlow – 一个秘密武器 >>
文章信息
- 作者:神飞 来源: 前端观察
- 标签: 雪碧图
- 发布时间:2012-05-10 23:53:01
近3天十大热文
-
[65] find命令的一点注意事项
-
[47] memory prefetch浅析
-
[44] 读书笔记-壹百度:百度十年千倍的29条法则
-
[33] 卡诺模型―设计品质与设计价值的思考
-
[31] 小屏幕移动设备网页设计注意事项
-
[28] Oracle bbed工具的编译
-
[25] 基本排序算法的PHP实现
-
[23] 8大实用又重要Mac使用技巧
-
[22] 杨建:网站加速--Cache为王篇
-
[21] 程序员技术练级攻略