2010-03-15 54 views
15

好吧,它更多的是与图像和内存有关。如果我在页面上多次使用相同的图像,是否每个图像都合并到内存中?或者每个图像使用单独的内存量?关于CSS精灵和内存使用的快速问题

我很关心这个问题,因为我正在为Windows桌面小工具构建皮肤系统,并且正在查看默认皮肤中的图像,以便让文件系统保持清洁。同时我想尽量减少内存占用。如果我最终得到一个包含100个图像的文件,并在整个小工具中重复使用该图像100次,我不希望出现性能问题。

干杯。

+1

非常好的问题! +1 – Armstrongest 2010-03-24 16:41:23

回答

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文档,有关于你的决定不使用 CSS精灵一件有趣的事情,在The GIMAGE Protocol部分:

此协议是用于添加有用 图像到标记的HTML 标记更有效率的更多 。这种效率的结果 从改善缩略图处理和 图像缓存(它会尝试使用 的缩图如果 所要求的尺寸由256个像素小于256个 像素的Windows缓存)与请求使用 文件的图像相比 时://或http://协议。gimage协议的一个附加好处是, 文件以外的任何文件都可以被指定为源文件,并且 与该文件的 类型相关联的图标被显示。

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

如果以上这些信息对您都无帮助,我会尝试询问Windows Desktop Gadgets official forums

祝你好运!

+0

我希望避免测试它,我认为它可能会相当耗时。这绝对是一个选项。 +1为一个伟大的链接,它解释了很多,甚至可能已经回答了我的问题。 – 2010-03-18 00:02:35

+1

@GmonC:re:你的编辑,暗示g:图像协议如果只是那么简单,那将是一个好主意。不幸的是,这是一个相对错误的实现,有些图像在使用时会显得模糊,并且很难以所需的大小获取图像。 – 2010-03-21 20:06:50

+0

研究得好+1 – Armstrongest 2010-03-24 16:41:43

5

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

+0

你指的是文件系统缓存吗?如果是这样,那么它并不适用于Windows桌面小工具,因为它们仍然在本地文件系统上运行。内存使用是我最关心的问题。 – 2010-03-15 19:23:09

+0

我的意思是浏览器缓存。据我所知,Windows桌面小工具使用HTML/CSS/JavaScript /等。如果小工具的工作方式不同,我会非常惊讶。 我正在考虑一个网络托管的小工具,在您的情况下,spriting将不是必需的,它可能会更容易组织与个人图像文件的东西。 – 2010-03-15 21:03:57

+0

我实际上只是在考虑拍摄悬停/焦点图像,以保持皮肤文件夹有点整齐。同时我想,为什么不把它们全部精灵,背景图片等?只是认为为每组图像分配一个文件会比较简单,而不是所有图像都是单独的。因此,我关于记忆/表现的问题。 – 2010-03-16 15:42:22

1

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

任何体面的网络服务器都会自动为静态资源提供ETag头文件,它通常是基于本地文件名,文件长度和上次修改时间戳的组合自动生成的。但他们通常不会添加Expires标题,因此您需要自行添加它。在Stackoverflow判断你的发布历史后,我安全地假定你熟悉Apache HTTPD作为web服务器,所以我建议看看mod_expires documentation以了解如何将它自己配置为最佳。

简而言之,请将精灵图片与ETag以及未来的Expires标题一起提供,这样可以。