为什么Chrome每次都会对此SVG图像发出新请求,但不会为PNG发出新请求？

Question

我有一个应用程序,在多个位置显示相同的图像,可能会更改图像的src.

当我指向我之前已经使用的PNG图像时,浏览器不会打扰发出新请求,它只是使用已经在缓存中的PNG图像.但是,当我指向我之前使用的SVG图像图像时,浏览器(Chrome 22)会发出新请求.服务器返回304(未修改),因此不需要下载新图像,但这仍然需要一些额外的处理.

这可以在这个jsFiddle中轻松测试:http://jsfiddle.net/jtmuw/1/

$('button').click( function() {
  $('#a').attr('src', "myImage.svg");

  $('#b').attr('src', "myImage.png");
});

如果您打开Chrome(或至少Chrome v.22.0.1229.94)的小提琴并打开网络选项卡,您将看到已请求两个图像.如果您再次点击"重新加载图像",您的网络选项卡将显示多个SVG图像请求,但不再请求PNG图像.

据我所知,服务器返回相同的标题,所以我看不出任何差异的原因.

我在FF或Safari上没有看到这个,所以这可能是Chrome问题.但是,我仍然觉得可能在我缺少的标题中存在一些潜在的差异,并且Chrome不仅仅是奇怪地处理SVG图像.

Answer 1

您也许可以强制 Chrome 缓存该文件。w3schools对此有一个很好的概述，如下：http://www.w3schools.com/html/html5_app_cache.asp

本质上，您需要创建一个清单文件（将其称为...“myCache.appcache”或其他名称）

CACHE MANIFEST
/path/to/svg/file.svg

然后在你的 html 文件中指向它，如下所示：

<html manifest="myCache.appcache">

这将告诉 Chrome，即使您无法访问互联网，该文件也应该被缓存并可访问。