Chrome不会在SVG中缓存图片

Question

我刚刚发现Chrome不会缓存放置在SVG中的图像,如果它们的cache-control标题设置为no-cache.Firefox和IE10似乎忽略了这个设置.

我用静态SVG创建了一个小测试页面:

HTML:

<div style="width: 500px; text-align: center;">
    <input id="move-left-btn" type="button" value="&lt;&lt;">
    <input id="move-right-btn" type="button" value="&gt;&gt;">
</div>

<div class="svgwrapper" style="width: 500px; height: 250px; background-color: lightgrey;">
    <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="250">
        <g id="svggroup" class="transition-on" transform="matrix(0.2,0,0,0.2,80,35)">
            <image width="1672" height="887" opacity="1" xlink:href="https://dl.dropboxusercontent.com/sh/q7htlj5h8qqfhjf/SVDuynM7R3/car.png"></image>
        </g>
    </svg>
</div>

使用Javascript:

$(document).ready(function() {
    var curXPos = 80;

    // Local test function which represent some server calls in my "real life" scenario
    // Just updates the x-position in the transform matrix in this test case
    function updateSvgText(svgText, posXDelta) {
        curXPos += posXDelta;
        if (curXPos < 0) {
            curXPos = 160;
        } else if (curXPos > 160) {
            curXPos = 0;
        }

        return svgText.replace(/matrix\(.*\)/, 'matrix(0.2,0,0,0.2,' + curXPos + ',35)');
    }

    // Fetch the new SVG (in real life from server) and rerender it
    function moveSvg(posXDelta) {
        var svg = $('#svg'),
            svgText = updateSvgText($('.svgwrapper').html(), posXDelta);

        svg.empty();
        svg.append($(svgText).children());
    }

    $('#move-left-btn').click($.proxy(moveSvg, this, -20));
    $('#move-right-btn').click($.proxy(moveSvg, this, 20));
});

• cache-control将源图像标题设置为的工作示例no-cache(每次按下"移动"按钮后在chrome中闪烁):http:
  //jsfiddle.net/zF6NF/4/

• cache-control标题设置为max-age=315360000,public(无闪烁)的不同源图像的相同示例:http:
  //jsfiddle.net/zF6NF/5/

在Chrome中,您可以在第一个示例中看到每个按钮上的图像重新加载(图像的"闪烁"并且在开发工具的网络选项卡中可见),而Firefox在两个示例中都可以顺利地重新呈现SVG而无需重新加载.

一些其他信息:

1. 这只是一个例子.在我的"真实场景"中,我从服务器接收一个新的SVG(而不是updateSvgText方法调用),这意味着我不能通过改变变换矩阵属性的值来执行SVG的部分更新,但必须每次都重新渲染整个SVG(至少现在......).

2. 我无法控制图像来自哪里意味着两件事:

   • 我无法改变cache-control标题
   • 我无法创建Base64编码数据-uris,在本地保存它们只是在渲染之前将这些数据替换为SVG内部的图像(由于"相同资源来源"策略,无法创建Base64编码数据-uri; )

有没有办法要么......

• cache-control即使图像来自不受控制的远程位置,也会在本地覆盖/否决标题？
• 从一个从不同域加载的图像创建Base64编码数据-uri我对客户端没有任何控制权？
• 不知何故告诉Chrome总是在我的SVG中缓存图像？

毋庸置疑,其他解决方案也非常受欢迎!

谢谢

Answer 1

不幸的是，当涉及到缓存时，99% 都是服务器的工作。

内部指南：这里

浏览器将始终根据某些条件查找文件的最新版本：

• 缓存的条目没有过期日期，并且内容是在浏览器会话中首次访问
• 缓存条目有过期日期，但已过期
• Cache-Control/Pragma 告诉浏览器不要缓存
• 标头中的 Etag 很麻烦。

就解决方案而言，您有：

• 非常坚持让服务器人员知道您需要缓存（删除 etag、Cache-Control: public、max-age=31536000、Pragma: public）
• 在您的域上创建一个代理，该代理需要来自站点的图像（可以选择转换为 base64），然后发送到您的客户端（带有正确的标头）。这是 PHP 的示例：这里