使用缓存刷新页面

Question

我正在尝试刷新页面，但想要使用缓存并且无法弄清楚如何执行此操作。 有两种情况：

• 如果我单击 URL 栏并按回车键（或从其他地方访问页面），它将从缓存中重新加载页面/图像。 伟大的！

• 如果我单击刷新按钮或使用 Javascript 刷新页面，它会再次抓取所有图像并永久保存。 不是很好！

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

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

提前感谢您的帮助！

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

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

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

Javascript：top.location.reload（假）； （没有缓存！）

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

Answer 1

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

编辑（供您编辑）：您看到这种行为是因为您将来没有设置 Expires header。 您需要在 Apache 中添加 Expires header 。

Answer 2

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

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

Answer 3

您的第二个请求是通过手动刷新页面发起的。 当你这样做时，浏览器会发送一个额外的cache-control:max-age=0 header 请求。 这就是 304（未修改）的来源。

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

Answer 4

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

Answer 5

使用这个站点，我只得到了带有location.refresh(true);的绿色图像。 . 使用location.refresh(); 或location.refresh(false); 我得到了红色的图像。 工作正常，我猜。

Answer 6

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

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

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

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

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

实现这一点的最佳方法是在响应标头中使用etags 。 这样，浏览器将向服务器发送一个if-none-match请求，并在没有修改任何内容的情况下返回304 Nothing changed响应。