javascript - Chrome 不会在 SVG 中缓存图像

Question

我刚刚发现，如果 SVG 中的 cache-control header 设置为 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 header 设置为 no-cache 的工作示例(每次按下“移动”按钮后在 chrome 中闪烁):
  http://jsfiddle.net/zF6NF/4/

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

在 Chrome 中，您可以在第一个示例中看到每次单击按钮时图像的重新加载(图像“闪烁”并在开发工具的网络选项卡中可见)，而 Firefox 在两个示例中顺利地重新呈现 SVG，没有任何正在重新加载。

一些附加信息:

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

2. 我无法控制图像的来源，这意味着两件事:

   • 我无法更改 cache-control header
   • 我无法创建 Base64 编码的 data-uris，将它们保存在本地并在渲染之前用这些 data-uris 替换 SVG 中的图像(由于“相同资源来源”政策，无法创建 Base64 编码的 data-uri ...)

有没有办法...

• 即使图像来自不受控制的远程位置，也要在本地覆盖/否决 cache-control header ？
• 根据从不同域加载的图像创建 Base64 编码的 data-uri 我对客户端没有任何控制权？
• 以某种方式告诉 Chrome 始终在我的 SVG 中缓存图像？

不用说，其他解决方案也非常受欢迎!

谢谢

Answer 1

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

部门内指南:here

浏览器总是会根据特定条件寻找更新版本的文件:

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

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

• 非常坚持你的服务器人员你需要缓存(删除 etag，Cache-Control:public，max-age=31536000，Pragma:public)
• 在您的域上创建需要网站图像的代理(可选择转换为 base64)，然后发送给您的客户端(使用正确的 header )。这是 PHP 的示例:here