优势/改进

Question

在我们的应用程序中，我们有两个用例，我们希望避免从浏览器缓存中检索过时的图像：

用户更改了自己的个人资料照片。
用户更改了其他允许管理的用户的图片（想想团队及其队长）。

在上传视图中，我们没有任何问题，只需在图片网址中添加时间戳，就像其他问题（Refresh image after AJAX file upload，Break image caching）中所建议的那样。对于所有其他视图，这个简单的方法可能存在问题：我们实际上希望尽可能使用缓存，但如果我们知道我们最近更新了图像，请避免使用缓存。

在我们的应用程序中，管理用户使用用户列表来表示用户的用户图像（我知道，这是革命性的）。如果她刚刚更改了其中一个用户图像，她希望此列表显示新图像。每隔一段时间她就会看到用户的图像。

我们无法将?timestamp={now}添加到此用户列表中的每个图像，因为这会破坏任何缓存的好处。

对于尽可能使用缓存并重新加载我们知道已更新的图像的好方法的任何建议？

Answer 1

我们现在选择的解决方案：

我们计划为图片设置合适的标题（请参阅this very good answer）
我们存储在呈现网址时使用的更新图像的本地列表

第2部分可能需要一些解释：幸运的是我们在前端使用very good JS framework，允许我们定义任意方法并在模板中使用它们。我们的模型有一种返回照片URL的方法，每个模板都使用此URL。

上传新图片时，我们会将id与localStorage中的当前时间戳相关联：

window.localStorage['nocache.'+id] = new Date().getTime()

每当我们请求图像路径时，我们会查看localStorage以查看是否必须在URL中附加时间戳，否则将按原样返回URL。

优势/改进

用户已触发的更新将立即可用，不仅在缓存过期后。
所有其他资源都使用缓存。
我们会针对我们正在构建的每个图片网址查看localStorage。这可能很昂贵。
我们总是需要通过模型的方法来创建照片URL（从DRY角度来看，但我们一定会使用该模型）

代码

生成网址的代码如下所示

getPhotoUrl: function() {
    return api.getImageUrl(this.id)
}

在API（非常简化）中

getImageUrl: function(id) {
    var url = "/prefix/something/user/" + id + "/image";
    // if we have stored a timestamp, add that to the URL
    var noCache = window.localStorage['nocache.'+id];
    if (noCache !== undefined) {
        url += "?" + noCache;
    }
    return url;
}

模板代码保持不变：

<!-- render via img.src -->
<img src="<%= user.getPhotoUrl() %>" alt="<%= user.lastname %>" />

<!-- render via CSS background -->
<div class="img" alt="<%= this.shortUsername %>"
    style="background-image: url('<%= this.getPhotoUrl() %>')">
    ...
</div>

上传新版本的图像并避免缓存

1 个答案:

优势/改进

代码