javascript - 我可以让浏览器尊重图像的缓存控制吗？

Question

我想每 N 秒刷新一次网页上的图像。执行此操作的常用方法是将 ?t= 添加到图像源：

    function refreshImage(){
        document.getElementById('img1').src='https://someserver/cam?t='+ new Date();
    }
    window.setInterval(refreshImage,5000);

但是，这可能会破坏 NGINX 或 CloudFront 等缓存代理。例如，如果缓存在缓存键中包含 t=，那么它将在缓存中保留多个副本。我们可以从缓存键中排除 t= ，这已经解决了，但这仍然意味着浏览器在每次请求时都会返回网络，并且浏览器缓存将不必要地填充。这意味着图像的代理必须不同。

我在其他地方看到这应该有效：

    function refreshImage(){
        document.getElementById('img1').src='https://someserver/cam#t='+ new Date();
    }
    window.setInterval(refreshImage,5000);

但在我的测试中，它没有。

我们可以在图像响应中包含 Cache-Control:no-store 并执行以下操作：

    function refreshImage(){
        document.getElementById('img1').src='https://someserver/cam';
    }
    window.setInterval(refreshImage,5000);

但是，这会破坏代理缓存，告诉他们根本不要存储图像。

我宁愿以对代理缓存和浏览器缓存都友好的方式执行此操作。在我看来，最好使用 Cache-Control:max-age=30 来提供图像，并在浏览器和代理缓存中缓存 30 秒。浏览器不应该添加时间戳，也不应该在 30 秒内再次请求，如果另一个浏览器这样做，代理缓存应该为它的副本提供 30 秒。Origin 每 30 秒应该只看到一个请求。

我知道我可能应该只做 ?t= 并完成它，但我试图更好地理解为什么会这样，以及是否有更好的方法。我是否误解了这里应该发生的事情？有没有办法让浏览器尊重图像请求的 Cache-control:max-age=30 ？我缺少一些缓存标头？

标签： javascriptimagecaching