Chrome 不会在 SVG 中缓存图像答案

【问题标题】：Chrome doesn't cache images inside SVGChrome 不会在 SVG 中缓存图像
【发布时间】：2013-10-25 15:51:57
【问题描述】：

我刚刚发现，如果将 cache-control 标头设置为 no-cache，Chrome 不会缓存放置在 SVG 中的图像。 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，没有任何重新加载。

一些附加信息：

这只是一个例子。在我的“现实生活场景”中，我从服务器接收到一个新的 SVG（而不是 updateSvgText 方法调用），这意味着我不能只通过更改变换矩阵属性的值来执行 SVG 的部分更新但每次都必须重新渲染整个 SVG（至少现在......）。
我无法控制图像的来源，这意味着两件事：
- 我无法更改cache-control 标头
- 我无法创建 Base64 编码的数据 uri，将它们保存在本地并在渲染之前将 SVG 内的图像替换为这些数据 uri（由于“资源相同”策略，无法创建 Base64 编码的数据 uri ...)

有没有办法...

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

不用说，其他解决方案也很受欢迎！

谢谢

【问题讨论】：

不相关的注释 - 如果文本后面有另一个括号，则正则表达式可能会过度匹配。所以应该是/matrix\([^)]*\) 什么的。

标签： javascript google-chrome svg browser-cache cache-control

【解决方案1】：

不幸的是，在缓存方面，99% 是服务器的工作。

深入指导：here

浏览器将始终根据特定条件查找文件的更新版本：

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

就您拥有的解决方案而言：

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

【讨论】：