IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

CSS雪碧图会占用太多浏览器内存吗?

前端观察 2012-05-10 23:53:01 累计浏览 3,685 次
本机暂存

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

实验:

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

    同分类推荐文章

    1. translateZ() (2026-06-25 21:18:56)
    2. translateY() (2026-06-25 21:17:56)
    3. translateX() (2026-06-25 21:16:01)

    查看更多 前端 文章 →

    建议继续学习

    1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,443)
    2. WEB系统需要关注的一些点 (累计阅读 18,224)
    3. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,979)
    4. 各公司对前端开发的职位描述 (累计阅读 10,407)
    5. iframe大小自适应 (累计阅读 10,059)
    6. 大并发下的高性能编程 – 改进的(用户态)自旋锁 (累计阅读 9,046)
    7. 低成本和高性能MySQL云数据的架构探索 (累计阅读 8,587)
    8. 浏览器的渲染原理简介 (累计阅读 8,377)
    9. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,358)
    10. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)