【转】CSS雪碧图会占用太多浏览器内存吗

简介:

可能是某篇微博的关系,今天有人来评论说,使用雪碧图,内存会暴涨的。。。这个问题讨论的也蛮多了,那,到底,使用雪碧图后,会占用很多内存吗?

实验:

下午做了个简单的实验,用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的自动合并雪碧图功能后,再也不用为制作/更新雪碧图操心了。。。

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

作者:白树

出处:http://peunzhang.cnblogs.com/

目录
相关文章
|
6月前
|
Web App开发 缓存 数据安全/隐私保护
如何利用系统内存盘提升你的浏览器上网速度
内存盘这个东东大家应该都知道,内存的读写速度要远远高于硬盘,而我们日常上网浏览器都缓存在硬盘,为了进一步加速,内存盘这个东东就诞生了,虚拟内存大家应该都知道,就是把硬盘的一部分空间划分给内存使用,而内存盘恰恰相反,就是把内存划分出来创建一个新的盘符,这个分区的读写速度极高,大家可以吧日常上网的缓存文件丢进去,例如QQ和浏览器的缓存,今天和大家分享的是软媒魔方的一个小工具,叫做魔方内存盘,如果已经安装过魔方电脑大师的童鞋直接开启此功能就行了,没有的话也没关系,本站制作了单文件版,大小只有271kb,大家下载后即可使用。
|
8月前
|
存储 缓存 网络协议
html&css&浏览器相关面试题大全(二)
html&css&浏览器相关面试题大全
|
8月前
|
Web App开发 编解码 前端开发
html&css&浏览器相关面试题大全(四)
html&css&浏览器相关面试题大全
|
8月前
|
存储 缓存 JavaScript
html&css&浏览器相关面试题大全(三)
html&css&浏览器相关面试题大全
|
3月前
|
Web App开发 前端开发 JavaScript
CSS容器查询获得主流浏览器支持,是什么?怎么用?
CSS容器查询获得主流浏览器支持,是什么?怎么用?
|
4月前
|
前端开发
(最简单)使用 reset-css 初始化浏览器css样式
(最简单)使用 reset-css 初始化浏览器css样式
54 1
|
4月前
|
Web App开发 前端开发 容器
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
|
7月前
|
Web App开发 前端开发
CSS @media 判断不同浏览器使用不同CSS
CSS @media 判断不同浏览器使用不同CSS
41 0
|
8月前
|
Web App开发 前端开发 JavaScript
html&css&浏览器相关面试题大全(一)
html&css&浏览器相关面试题大全
|
8月前
|
前端开发 开发者
将近20年,CSS终于在所有现代浏览器实现了原生嵌套语法!!!-3
使用&进行精确控制和灵活性 假设您想要选择.demo元素,并使用:not()选择器。这时就需要使用&:
126 0