缓存背景图片答案

【问题标题】：cache background image缓存背景图片
【发布时间】：2012-01-19 20:04:28
【问题描述】：

有没有办法“缓存”背景图片。

例如.. 背景图片为 3x3px，设置如下：

body {
    background: #000 url(bg.png);
}

刷新时，背景图片会“闪烁”一秒钟。

有跨浏览器的解决方案吗？（如果相关，适用于 Apache/PHP 服务器）

如果你去 seo.hr 并浏览导航，...你可以看到我在做什么。

【问题讨论】：

考虑将背景图片放大，以减少平铺。像 128x128 这样的东西是合适的。它可能仍会闪烁，但不那么明显。
你确定缓存是问题吗？大多数浏览器会在本地缓存背景图像，但渲染仍然需要几分之一秒。渲染队列中可能有更高优先级的项目。
@KarmicCoder 我不确定这是缓存问题。但是，例如，当我在 localhost 服务器上查看某个网站时 - 渲染时间是几毫秒。如果我在 www 服务器上测试同一个网站（例如 2Mbit 连接），则需要一两秒。
使背景图像尽可能大，但小于 10kb。较大的瓷砖不会有“闪烁”。
这可能不适用，但如果您使用的是安全连接 (https)，则不会发生缓存（也不会发生）。

【解决方案1】：

您可以尝试使用 base64 对图像进行编码，然后将其直接放入 CSS 源代码中。我在here上发现了一个关于利弊的问题。

【讨论】：

【解决方案2】：

是的！

你应该决定什么更适合你，但是这个时候我们有一些方法，比如：

此时我推荐使用 javascript 的混合解决方案。这将使它在尽可能多的浏览器上工作。

将多张图片合二为一可以让您更进一步，因此请查看这篇 sprites 文章： http://www.alistapart.com/articles/sprites/

【讨论】：

【解决方案3】：

使您的平铺图像大得多，当浏览器引擎呈现页面时，它必须将每个平铺相乘以覆盖对象的整个宽度和长度，这会导致大对象上的小平铺性能不佳。

小图块 -> 更多重复 -> 较慢的性能

【讨论】：

【解决方案4】：

我认为您需要首先确定问题是否真的是缓存问题，或者它是否是由图像大小引起的。您可以使用 Wireshark 或 Fiddler 之类的程序来执行此操作，但老实说，这对于您的需求来说太过分了，而且您可能已经拥有一个带有开发工具的浏览器。

以下是您在 Chrome 中确定图片来源的方法（其他浏览器类似）。

请注意，它显示状态 200（来自缓存）。浏览器不需要访问服务器并重新请求该资源。它使用了缓存。如果那个“来自缓存”的文本不存在，那么它就没有重用缓存的资源。

还有可能您会收到 304 状态代码。这意味着服务器说自从您发出最后一个请求以来，该图像没有被修改。在这种情况下，您确实会导致服务器跳闸。

好的，所以我的图片不在缓存中...现在怎么办？

发生这种情况的原因有几个。

您的请求标头未设置为告诉浏览器缓存图像（也可以在同一个“标头”选项卡中找到，如果浏览器实际访问服务器获取图像，您会看到该状态代码） .您需要将cache-control 和expires 设置为对您有意义的内容。缓存标头可能会有点复杂，您可能需要浏览 this caching tutorial document。
是 SSL 吗？如果是这样，并非所有浏览器都会缓存它，但大多数现代浏览器都会缓存。在这些图片上设置cache-control: public（也会过期）。

真正的问题是如何解决这个问题？不幸的是，这完全取决于您使用的服务器和/或框架。由于 OP 使用的是 Apache，他们可以找到great documentation on the Apache module mod_expires to figure out how to tweak caching for their site。

【讨论】：

那么如何通过 css 背景属性强制缓存/指定 HTTP 标头？
@DrazenBjelovuk 我添加了一些关于如何在 Apache 中执行此操作的信息。这实际上取决于您使用的框架和服务器。 OP 使用的是 Apache 和 PHP。由于它是静态图像，Apache 将是重新配置缓存的最佳位置。
那我认为没有服务器控制就没有办法了吗？