Question

我在 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; background：url（images / icons.png） no-repeat -200px -64px'></a>"});

[HTML文件中还有其他地方提到了 icons.png ]

现在，每当我将鼠标悬停在链接上时，工具提示都会显示，但是同时浏览器正在向服务器发送HTTP请求 icons.png 文件。并且来自服务器的响应代码是来自 304未修改。

虽然没有提取文件的内容，但是每次发送标题（大约166字节）的开销仍然存在，这反过来导致延迟1.5秒（我正在慢慢连接）。在1.5秒的这段时间内，工具提示元素没有背景图像＆amp;突然间，图像无处不在。

以下是

的一些屏幕截图

Chrome网络面板：

Firebug网络面板：

HTTP标头：

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

我发现服务器没有发送任何“过期”或“缓存控制”标头以及内容。我不确定这是否可能是Chrome这种特殊行为背后的原因。任何建议都受到高度赞赏。

P.S：该应用程序托管在 Heroku 的共享托管环境中。我使用的是Firefox 15.0＆amp; Ubuntu 12.04 x86_64上的Chrome版本21.0.1180.89。

Answer 1

每当您第一次显示元素时，至少在现代浏览器中下载任何相关背景图像的点。

您的多个请求可能是因为它们是您在新工具提示上盘旋的时间，将其带入可见性，从而提示调用图像。

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

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

Answer 2

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

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

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

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

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

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

当然缓存控制仍然是必要的，这种编码方法可以让你头疼。

Answer 3

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-origin_fetches

元素的一个不错的功能是它们能够接受媒体属性。这些可以接受媒体类型或成熟的媒体查询，从而使您能够进行响应式预加载！

您可以将此代码添加到head标签

 <link rel="preload" href="image-url" as="image" >

如果您正确设置了网站的CORS设置，则只要在元素上设置了跨域属性，就可以成功预加载跨域资源。

<link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

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

3 个答案: