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

我有一个名为的icons.png的PNG文件，它位于apache服务器上。基本上这个文件是其他小图片元素的组合（CSS Sprite）。当第一次加载页面时，此文件将以正常200 OK响应加载。浏览器多次发送相同内容（PNG图像）的请求

页面加载后;有一些链接悬停在自定义工具提示被触发。这工具提示显示部分图像从icons.png文件作为背景图像的一些HTML元素。

例如HTML代码是这样的：

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

[有在HTML文件中的一些其他地方icons.png已转交]

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

尽管文件的内容没有被取出，但是在发送标题（各地的166字节）的开销还是有的每一次，而这又是造成1.5秒一个延迟（ 我在一个该死的慢速连接）。在1.5秒的时间段内，工具提示元素没有背景图像&突然，图像突然出现。

这里有

的Chrome网络面板的一些屏幕截图：

萤火虫网面板：

个

HTTP标头：

据我知道一旦资源已获取的浏览器应该保持在其缓存 &从取在有需要的地方，而不是多次请求服务器。

正如我发现，服务器不与内容一起发送任何“过期”或“缓存控制”头。我不确定这是否会成为Chrome的这种特殊行为背后的原因。任何建议非常感谢。

P.S：该应用托管在Heroku的共享主机环境。我在Ubuntu 12.04 x86_64上使用Firefox 15.0 & Chrome版本21.0.1180.89。

来源

2013-03-05 dibyendu

你说得对，你需要设置'Cache-Control'和'Expires'头文件。 'icons.png'托管在你自己的apache服务器或heroku上吗？ – vikraman 2013-03-05 12:49:48

@ vh4x0r，我已经将所需的'Cache-Control'配置添加到'.htaccess'文件并在我的'localhost'上进行了测试。现在响应标题就像[this]一样（http://i.imgur.com/2hayEoi.png）。现在，Chrome正在执行所期望的事情，即从缓存中获取响应** 200 OK（来自缓存）**而无需请求服务器。查看[chrome]（http://i.imgur.com/JUyAn2M.png）的截图。但即使是现在，Firefox仍然在用最终的** 304 Not Modified **响应来访问服务器（参见firebug的[screen-shot]（http://i.imgur.com/zd2C8gk.png））。你能证明这一点吗？ – dibyendu 2013-03-05 13:38:37

我不能，但我会要求你更新firefox，然后在'about：config'中重新检查你的缓存设置。另外，尝试使用'Last-Modified'标题。 – vikraman 2013-03-05 13:52:59

每当你第一次展示一个元素，那就是它至少在现代浏览器中下载任何相关背景图像的点。

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

你的直觉是对的，问题是如果没有缓存头配置直接在你的服务器上完成，或者通过.htaccess文件完成，那么它会一直向服务器请求一个http请求来查看它是否需要下载新版本或不。只要你理清可以通过mod_expires设置的“expires”头文件，它就会开始每次返回本地请求的文件版本。

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

来源

2013-03-05 11:21:53 niaccurshi

感谢您的回复。但是，并不是每次我将鼠标悬停在不同的元素上，而是在将鼠标悬停在同一元素上以触发相同的工具提示时发送新的请求。由于Heroku提供的托管环境;没有像.htaccess这样的外部方式，我可以通过改变apache的配置。 – dibyendu 2013-03-05 11:28:05

有趣。您的JavaScript代码是否每次重新创建工具提示或只重复一次并“隐藏”它？ – niaccurshi 2013-03-05 11:29:12

我检查了JS插件。它本质上是一次创建并在显示/隐藏类型的插件之间切换。 – dibyendu 2013-03-05 11:34:08

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

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

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

的一种方式。

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

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

当然缓存的控制仍然是必要的，编码可以为您节省一些头痛的这种做法。

来源

2014-04-23 08:26:21 pentzzsolt

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

回答

相关问题