5

我在apache服务器上托管了一个名为icons.png的 PNG 文件。基本上这个文件是其他小图像元素（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 网络面板：

铬合金

  • Firebug 网络面板：

火狐

  • HTTP 标头：

标头

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

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

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

4

2 回答 2

2

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

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

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

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

于 2013-03-05T11:21:53.203 回答
1

我最近在本地开发过程中也遇到了这种行为。具有精灵背景的元素:hover在 CSS 文件中有一个状态，它指向具有不同背景位置的同一个精灵背景图像，并且在切换元素的背景时会导致非常小的但仍然明显的延迟。

.class {
    background: transparent url('sprite.png') 0 0 scroll;
}

.class:hover {
    background: transparent url('sprite.png') -50px 0 scroll;
}

确保不会发生这种情况的一种方法是仅使用background-positionCSS 属性。

.class {
    background: transparent url('sprite.png') 0 0 scroll;
}

.class:hover {
    background-position: -50px 0;
}

当然缓存控制还是需要的，这种编码方式可以省去一些头疼的问题。

于 2014-04-23T08:26:21.907 回答