browser-cache - 浏览器多次发送对相同内容(PNG 图像)的请求

Question

我有一个名为 的 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; 背景: url(images/icons.png) no-repeat -200px -64px'></a>"});
[HTML 文件中还有一些其他地方 图标.png 已提及]

Now every time I hover on the link, the tooltip is showing up, but simultaneously the browser is sending a HTTP request to the server for the icons.png file. And the response code from the server is coming as 304 Not Modified.

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

这是一些屏幕截图

Chrome 网络面板:

Firebug 网面板:

HTTP header :

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

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

P.S: The application is hosted on Heroku's shared hosting environment. I'm using Firefox 15.0 & Chrome Version 21.0.1180.89 on Ubuntu 12.04 x86_64.

Answer 1

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

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

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

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