浏览器多次发送对相同内容（PNG 图像）的请求

Question

我有一个名为icons.png的 PNG 文件托管在apache服务器上。基本上这个文件是其他小图像元素（CSS Sprite）的组合。当页面第一次加载时，此文件会以正常的200 OK响应加载。

页面加载后；有一些链接悬停在其上触发自定义工具提示。此工具提示将icons.png文件中的部分图像显示为某些HTML 元素的背景图像。

例如 HTML 代码是这样的：

jQuery(".profile").tipTip({delay: 200, defaultPosition: "top", content: "<a href='#' style='width: 32px; height: 32px; display: block; 背景：网址（图像/图标.png） no-repeat -200px -64px'></a>"});

[HTML 文件中还有一些其他地方引用了icons.png ]

---

现在，每次我将鼠标悬停在链接上时，都会显示工具提示，但同时浏览器会向服务器发送一个 HTTP 请求以获取icons.png文件。来自服务器的响应代码是304 Not Modified。

虽然没有获取文件的内容，但是每次发送标头（大约 166 字节）的开销仍然存在，这反过来又导致了1.5 秒的延迟（我的连接速度很慢）。在这段 1.5 秒的时间里，工具提示元素没有背景图像 & 突然图像突然出现。

---

这是一些屏幕截图

• Chrome 网络面板：

• 萤火虫网面板：

• HTTP 标头：

---

据我所知，一旦获取了资源，浏览器应该将其保存在缓存中并在必要时从那里获取，而不是多次请求服务器。

正如我发现的那样，服务器没有随内容一起发送任何“ Expires ”或“ Cache-Control ”标头。我不确定这是否是 Chrome 如此异常行为背后的原因。任何建议都受到高度赞赏。

PS：该应用程序托管在Heroku的共享托管环境中。我在 Ubuntu 12.04 x86_64 上使用 Firefox 15.0 和 Chrome 版本 21.0.1180.89。

Answer 1

每次您第一次显示一个元素时，它都会下载任何关联的背景图像……至少在现代浏览器中是这样。

您的多个请求可能是因为您将鼠标悬停在新的工具提示上，使其可见，从而提示调用图像。

不过，您的直觉是对的，问题是，如果没有直接在服务器上或通过 .htaccess 文件完成缓存标头配置，那么它将继续使用 http 请求来请求服务器以查看是否需要下载更新版本或不。一旦你整理出“过期”标头（可以通过 mod_expires 设置），它就会开始每次都返回本地请求的文件版本。

来源：http ://httpd.apache.org/docs/2.2/mod/mod_expires.html