9

我刚刚发现 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 编码的数据 uri，将它们保存在本地，只需在渲染前用这些数据 uri 替换 SVG 内的图像（由于“资源相同”策略，无法创建 Base64 编码的数据 uri... )

有什么办法要么...

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

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

谢谢

4

1 回答 1

3

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

深入指导：这里

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

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

在解决方案方面，您有：

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