1

我正在使用来自 famfamfam Silk 图标集的大约 30 张图像，并且发现这些图像采用 base64 编码格式

这些图标存储在一个 .css 文件（大约 20kb）中，每行结果将包含 5 个相同的图标 - 仅通过 https 提供给现代浏览器。

我有兴趣知道我是否有 100 行，每行包括从单个外部 CSS 文件引用的 5 个相同图标，这会比单个图像文件或精灵更好吗？CSS 文件显然会被缓存，但是如果浏览器必须从 data-uri 一遍又一遍地渲染相同的背景图像，这比缓存的图像文件更好还是更差？

我也从Wikipedia注意到这一点，但对其他人的意见和经验感兴趣。

从同一个文档中多次引用同一个资源（例如嵌入的小图像）会导致嵌入资源的多个副本。相比之下，一个外部资源可以被任意多次引用，但只能下载和解码一次。

4

1 回答 1

2

我不知道如何为此进行可测量的测试，但我创建了以下小提琴http://jsfiddle.net/chrisdanek/36Uk3/

这是 1000 个div元素，背景设置为 famfamfam 图标之一

div { 
  float: left; 
  background: url('data:image/png;base64,...') no-repeat; 
  width: 16px; 
  height: 16px; 
}

现在，如果您查看 Chrome 中的开发人员工具，您会注意到此图标仅加载一次，而不是作为单独资源加载 1000 次。在分析此示例和使用图标的 url 时，我也没有注意到内存负载的差异。

其他浏览器的这种行为可能会有所不同，但我的猜测是，只要您不在 CSS 中重复自己并重用相同的编码资源，您就不会看到基于编码本身的差异。您仍将受益于少一个 HTTP 请求。

于 2013-02-25T21:43:11.920 回答