使用缓存刷新页面答案

【问题标题】：Refresh page using cache使用缓存刷新页面
【发布时间】：2011-09-24 00:13:41
【问题描述】：

我正在尝试刷新页面，但想使用缓存并且不知道如何执行此操作。有两种情况：

如果我在 URL 栏中单击并按 Enter（或从其他地方访问该页面），它会从缓存中重新加载页面/图像。 太棒了！
如果我单击刷新按钮或使用 Javascript 刷新页面，它会再次抓取所有图像并永久保存。 不好！

我已经尝试过：top.location.reload(false); 和 top.location.reload(true);（我是从 iFrame 中发送的）并且都没有使用缓存。我避免使用location，所以它不会出现在浏览器历史记录中两次。

问题：如何使用缓存的图像重新加载页面？是否有不同的 javascript 函数或者这是 mod_expires 问题？

提前感谢您的帮助！

编辑：（来自 chrome 的信息：开发者工具）

导航到页面时，我会为所有图像获取“来自缓存”
刷新页面时，我得到所有图像的“304 - 未修改”（并且下载每个图像都需要时间）

编辑 2：（来自图像的标题，safari：开发者工具）

Javascript：top.location.reload(false); （没有缓存！）

Status Code:304 Not Modified

Request Headers
Cache-Control:max-age=0
If-Modified-Since:Tue, 28 Jun 2011 07:13:17 GMT
If-None-Match:"104684ae-a7d-66e41d40"
Referer:http://getdirectus.com/dev/media.php
User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-us) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

Response Headers
Cache-Control:max-age=157680000
Connection:Keep-Alive
Date:Tue, 28 Jun 2011 16:56:50 GMT
Etag:"104684ae-a7d-66e41d40"
Expires:Sun, 26 Jun 2016 16:56:50 GMT
Keep-Alive:timeout=5, max=94
Server:Apache/2.0.54

导航到页面：（使用缓存）

Status Code:200 OK

Response Headers**
Accept-Ranges:bytes
Cache-Control:max-age=157680000
Connection:Keep-Alive
Content-Length:2685
Content-Type:image/jpeg
Date:Tue, 28 Jun 2011 16:54:20 GMT
Etag:"104684ae-a7d-66e41d40"
Expires:Sun, 26 Jun 2016 16:54:20 GMT
Keep-Alive:timeout=5, max=99
Last-Modified:Tue, 28 Jun 2011 07:13:17 GMT
Server:Apache/2.0.54

【问题讨论】：

也许我没有理解这一点，但是如果你想保留缓存，那么“刷新”有什么意义呢？
它可以是 a) 服务器过期和/或 b) 客户端过期（无缓存或小缓存）不要忘记 c) 一些随机值添加到 URL，因为您希望将图像排除在外缓存但忘记了。下载 firebug，点击 NET 标签并查看标题
@Brad - 具体来说，它用于媒体缩略图页面。在 AJAXed iFrame 中上传新图像后，我想刷新页面......但每次我这样做时都会重新加载页面上的所有图像，而不是从服务器。从技术上讲，它应该只必须加载新上传的图片。
@cbh：这是一个不同的问题！你想在客户端缓存图片
@mplungjan - 谢谢，这不是客户端过期问题，因为在我点击刷新按钮之前，使用（整个）页面的缓存没有问题。文件名之后没有查询字符串或任何内容......至于服务器到期，这将是一个 htaccess 修复吗？

标签： javascript caching refresh

【解决方案1】：

window.location.href = window.location.href;

如果位置包含#，请务必在设置href之前将其删除。

【讨论】：

【解决方案2】：

您的第二个请求是通过手动刷新页面发起的。执行此操作时，浏览器会随请求发送一个额外的 cache-control:max-age=0 标头。这就是 304（未修改）的来源。

如果您在网站内导航（使用链接），浏览器将继续使用其缓存。

【讨论】：

【解决方案3】：

window.location.reload( false ); 的 documentation 表示它将从缓存中加载。如果这没有发生，那么您可能会看到浏览器错误。看看您是否可以在其他浏览器中复制该问题。

编辑（用于您的编辑）：您看到这种行为是因为您将来没有设置 Expires 标头。您将需要add an Expires header in Apache。

【讨论】：

@SpliFF - 谢谢，我添加了一个 htaccess 文件，其中包含以下内容：ExpiresActive On ExpiresByType image/jpg "modification plus 5 years"（我所有的缩略图都是 jpgs）并且同样的问题仍然存在。刷新时仍然收到“304 - 未修改”。有什么想法吗？
使用access plus 5 years。使用modification 需要不断询问服务器资源是否被修改（因此是 304 响应）
@SpliFF - 我已将其切换到 access 并且问题仍然存在，返回相同的状态。难道是点击刷新按钮强制浏览器不使用缓存？
是的，没错。物理点击刷新按钮总是发送Cache-Control: no-cache
@SpliFF - 好的，回到最初的问题，为什么 no-cacheing 我的 javascript 会刷新？可能是因为来自 iFrame 的请求？

【解决方案4】：

这里需要考虑两件不同的事情：

1：请求...浏览器->服务器

2：响应...服务器 -> 浏览器

当您刷新页面时，您无法绕过浏览器向服务器请求页面资源。

您可以做的是确保服务器发送的响应最少。

实现此目的的最佳方法是在响应标头中使用etags。这样浏览器就会向服务器发送一个if-none-match 请求，并在假设没有任何修改的情况下得到一个304 Nothing changed 响应。

【讨论】：

我的标题中似乎有 etags（请参阅帖子中的编辑）并且 am 在 javascript 刷新时获得 304 Not Modified。但是页面仍然需要时间来加载所有图像（而不是像导航到页面时那样从缓存中加载）。有什么想法吗？
图片有标签吗？您需要在所有不想再次加载的资产上添加 etags

【解决方案5】：

使用this site，我只得到location.refresh(true); 的绿色图像。使用location.refresh(); 或location.refresh(false); 我得到了红色图像。工作正常，我猜。

【讨论】：

@Raven - 哈哈，我去看到红色是不是很糟糕......然后点击刷新并且图像被破坏了？如果我再次刷新或导航到那里，我会看到它是绿色的......但它在所有刷新时都被破坏了。（我清除了缓存）

【解决方案6】：

如果您想在客户端启用缓存，请注意发送 Expire 标头，例如mod_expires

【讨论】：

我在 htaccess 文件中设置了expire（请参阅帖子中的标题），问题仍然存在。有什么想法吗？