javascript - 如何判断 XMLHTTPRequest 是否命中浏览器缓存

Question

如果可以判断（在 javascript 执行中）GET XMLHTTPRequest 是否命中浏览器缓存而不是从服务器获取响应？

score 23 · Accepted Answer

从XMLHttpRequest 规范：

对于作为用户代理生成的条件请求的结果的 304 Not Modified 响应，用户代理必须像服务器给出具有适当内容的 200 OK 响应一样行事。

换句话说，浏览器将始终给出状态码 200 OK，即使对于命中浏览器缓存的请求也是如此。

但是，规范还说：

用户代理必须允许作者请求标头覆盖自动缓存验证（例如 If-None-Match 或 If-Modified-Since），在这种情况下必须通过 304 Not Modified 响应。

因此，有一种解决方法可以使 304 Not Modified 响应对您的 JavaScript 代码可见。

score 3 · Accepted Answer

发出ajax请求时，您会得到响应代码

if (request.readyState == 4) {
     if (request.status == 200) { // this number.
       ...

状态 200 表示您正在获取数据的新副本：

请求已成功。响应返回的信息取决于请求中使用的方法 -

状态 304 表示数据未更改，您将从浏览器缓存中获取它：

如果客户端已经执行了一个条件 GET 请求并且允许访问，但是文档没有被修改，服务器应该用这个状态码来响应。

阅读更多关于状态码

更新：
您可以向您的 URL 添加缓存破坏器，以确保您始终访问服务器：

var ajaxUrl = "/path?cache="+(Math.random()*1000000);

score 1 · Accepted Answer

来自http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/

对于作为用户代理生成的条件请求的结果的 304 Not Modified 响应，用户代理必须像服务器给出具有适当内容的 200 OK 响应一样行事。用户代理必须允许作者请求标头覆盖自动缓存验证（例如 If-None-Match 或 If-Modified-Since），在这种情况下必须通过 304 Not Modified 响应。[HTTP]

我觉得这很模糊。我的假设是，如果有条件地请求资源，您会看到 304 响应代码。但是，正如我在另一条评论中解释的那样（来源：https ://developers.google.com/speed/docs/best-practices/caching ），如果该资源的最后一个响应服务器 http 标头有，甚至可能没有请求设定Cache-Control: max-age或Expires设定在未来的某个时间。在这种情况下，我不确定应该发生什么。

score 1 · Accepted Answer

该答案基于您的意思是仅浏览器缓存的假设，没有发生 304（修改后，etag 等）。

检查请求花费了多长时间 - 如果它是从缓存中解决的，那么它应该需要接近 0 毫秒。

score 0 · Accepted Answer

你使用 Firefox 的Firebug吗？

Firebug 有一个带有“XHR”过滤视图的“网络”面板。您应该能够通过请求阶段栏检查缓存信息，检查状态和/或单击三角形以检查“标题”。

缓存或不缓存
并非所有网络请求都是平等的——其中一些是从浏览器缓存而不是网络加载的。Firebug 为每个请求提供状态代码，因此您可以快速扫描并查看您的站点使用缓存来优化页面加载时间的效率。

Firebug Net Panel 文档在这里。

Chrome/Safari/Opera 都有类似的调试工具。刚刚在这里找到了一个很好的列表（大多数应该有检查 XHR 的工具）。

编辑：

为了有点救赎自己……

正如ibu 已经回答的那样，我也将首先检查响应的状态代码。

如果您使用 jQuery：

statusCode（添加 1.5） Map 默认值：{} 数字 HTTP 代码和函数的映射，当响应具有相应代码时要调用。例如，以下将在响应状态为 404 时发出警报：
$.ajax({
  statusCode: {
    404: function() {
      alert("page not found");
    }
  }
});
如果请求成功，状态码函数采用与成功回调相同的参数；如果导致错误，它们将采用与错误回调相同的参数。

jQuery 确实让生活变得轻松。:)

score 0 · Accepted Answer

要从 Google Chrome 等浏览器进行检查，请按 F12 打开 DevTools，导航到 Network，刷新以获取一些数据，按 XHR 过滤，然后单击正确的 XHR 请求。单击“headers”子选项卡，然后查看 Response Headers -> cache-control。

如果它说像no-cacheand max-age=0，那么你没有缓存。

如果它显示private，那么您的浏览器正在缓存，但服务器没有。

如果它说public，那么您正在缓存服务器端和客户端。

Mozilla.org 上的更多信息

javascript - 如何判断 XMLHTTPRequest 是否命中浏览器缓存

6 回答 6

编辑：

Related

Reference