1

将图像直接放入 css 是否会更快，因为它减少了 DNS/http 请求的数量？

直接在css中的图像：

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK7CAYAAAAz2+WzAAAAZElEQVRIx+2WwQ4AEAxDGz7X/5/rG8TaCi49iD3bxBQARgOAL1+kwuLNlKXBYigNfaEWQAWZ2nq5seYNs6F0EUuUQOISQGGbbICbT/NeaOCp8eIZ8cbMPvM3jXqLlJfKGs2+wpvWvG54wI6NvgAAAABJRU5ErkJggg==);

间接在 css 中的图像：

background: url('images/wrapper-bg.png');
4

2 回答 2

2

这是优化过度的一个很好的例子。

纯粹从减少http请求的数量来考虑它真的很诱人；减少请求，你就会减少加载时间，对吧？

嗯，是的，没错。但是您还需要考虑其他性能方面。如果只考虑性能的一个方面，很容易在其他方面影响你的性能。

  • 文件大小：Base64 编码使图像大小增加了 37%。因此，对于每 10k 个文件，如果您对它进行 base64 编码，那么您将在顶部添加额外的 3.5k。

  • 解码：Base64必须被浏览器解码回常规图像文件，才能正常处理。这需要时间。可能与减少 http 请求所节省的时间一样多。

  • 缓存：浏览器​​缓存东西。这很好，可以帮助我们减少下载量，它适用于 CSS 和图像。但是，当然，如果您对站点进行更改，则需要重新下载更改后的文件。如果该更改的文件也包含您的所有图像，那么这意味着重新下载整个文件，而不仅仅是一小部分。您塞入单个文件的内容越多，对您的站点进行小幅更改的可能性就越大，从而迫使之前缓存过该单个文件的所有浏览器都需要重新加载该文件。

  • 维护：优化您的网站在浏览器上的性能非常好，但除非您真的竭尽全力降低网站的速度，否则您应该将代码的可维护性放在类似的优先级（如果不是更高的话）。Data-URIs 不容易使用。有一些工具可以提供帮助，但最终，如果你有一个简单的图像文件和一个纯文本 CSS 文件，它更容易阅读、更容易使用、更容易在需要时替换元素，并且更容易调试。想想你自己的表现，以及你的代码的表现。

您可能想阅读有关该主题的最新文章（以及从中链接的其他文章）。

简短的回答是，如果您出于性能原因专门使用 data-URI 来减少来自图像的 http 请求，那么您不太可能获得您希望的性能提升。

于 2013-09-09T11:44:53.043 回答
1

不，将图像直接放在 CSS 中不是一个好主意。浏览器无论如何都会缓存东西，所以除了第一次加载它不会让任何东西更快。不要忘记将图像数据放入 CSS 中所带来的可怕混乱......

此外，当您发送适当的缓存标头甚至可能使用带时间戳的 URL（即资源的 mtime 是其 URL 的一部分）时，您可以告诉浏览器将所有内容缓存很长时间，并且当您更改某些内容时，它将从服务器重新加载.

于 2013-09-09T11:33:16.967 回答