关于CSS精灵和内存使用的快速问题

时间:2010-03-15 09:16:23

标签: html css

嗯,这通常与图像和内存有关。如果我在页面上多次使用相同的图像,是否会将每个图像合并到内存中?或者每个图像会使用单独的内存量吗?

我很担心这个,因为我正在为Windows桌面小工具构建一个蒙皮系统,我正在考虑在默认外观中使用spriting图像,这样我就可以保持文件系统看起来干净。同时我想尝试将内存占用保持在最低限度。如果我最终得到包含100张图片的单个文件,并在整个小工具中重复使用该图片100次,我不希望出现性能问题。

干杯。

3 个答案:

答案 0 :(得分:14)

测试它怎么样?使用和不使用spriting创建一个简单的应用程序,并监视您的Windows内存以查看哪种方法更好。

我告诉你要测试它,因为这个interesting post from Vladimir,甚至得到Mozilla "use sprites wisely"条目的认可:

  

(...)此图像用作精灵。请注意,这是一个1299x15,000 PNG。   它压缩得很好 - 实际下载大小约为26K - 但浏览器   不渲染压缩的图像数据。下载此图像时   解压缩后,内存中将使用 75MB (1299 * 15000 * 4)。

(在弗拉基米尔的帖子末尾还有其他一些很好的参考资料)

由于我不知道Windows如何呈现它的小工具(如果它不会处理压缩的图像数据),恕我直言,如果没有测试,确切地说哪种方法更好。

编辑:官方Windows Desktop blog(自2007年以来未更新)说the HTML runtime used for Windows Gadgets is MSHTML,所以我认为确实需要进行测试以了解您的应用程序如何处理CSS精灵

但是,如果您阅读了一些官方的Windows Desktop GadgetsWindows sidebar文档,那么您在{{3}中决定不使用 css sprites是一个有趣的事情。部分:

  

此协议对添加很有用   图像到小工具DOM更多   比标准HTML高效    标签。这种效率的结果   从改进的缩略图处理和   图像缓存(它将尝试使用   来自Windows缓存的缩略图if   请求的大小小于256   比较时的像素乘256像素)   使用。请求图像   file://或http:// protocols。一个补充   gimage协议的好处是   除标准图像以外的任何文件   文件可以指定为源,和   与该文件关联的图标   显示类型。

我会尝试使用此协议而不是CSS sprites并进行一些测试。

如果这些信息都不能帮助您,我会尝试在The GIMAGE Protocol询问。

祝你好运!

答案 1 :(得分:5)

图像将在缓存中显示一次(只要url相同且文件名中没有附加查询字符串)。 Spriting是要走的路。

答案 2 :(得分:1)

Webbrowsers通过其ETag响应标头识别可缓存资源。如果请求之间不存在或不同,则可以下载图像并将其多次存储在缓存中。如果您(实际上,Web服务器)为每个唯一资源提供唯一且相同的ETag标头,那么任何体面的Web浏览器都足够智能,可以将其保留在缓存中并重用它,只要其Expires标头允许。

任何体面的网络服务器都会自动为静态资源提供ETag标头,它通常是根据本地文件名,文件长度和上次修改时间戳的组合自动生成的。但通常他们不会添加Expires标题,因此您需要自己添加它。在Stackoverflow判断您的帖子历史后,我安全地假设您熟悉Apache HTTPD作为Web服务器,因此我建议您查看mod_expires documentation以了解如何自己配置它以达到最佳状态。< / p>

简而言之,请提供精灵图片以及ETag和远期Expires标题,这样就可以了。