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

Question

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

Answer 1

来自XMLHttpRequest规范 ：

对于由用户代理生成的条件请求而导致的304 Not Modified响应，用户代理必须表现为服务器使用适当的内容给出200 OK响应。

换句话说，即使对于访问浏览器缓存的请求，浏览器也总是会给出状态代码200 OK。

但是，该规范还说：

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

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

Answer 2

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

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

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

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

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

如果客户端已执行条件GET请求并允许访问，但文档尚未修改，则服务器应该响应此状态代码。

详细了解状态代码

更新：
您可以在URL中添加缓存破坏程序，以保证始终访问服务器：

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

Answer 3

这个答案是基于这样的假设，即你的意思是浏览器只有缓存，没有发生304（修改后，etag等）。

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

Answer 4

来自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将来某个时间设置Cache-Control: max-age或Expires 。 在这种情况下，我不确定应该发生什么。

Answer 5

你使用Firefox的Firebug吗？

Firebug有一个“Net”面板，带有“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确实让生活变得轻松。 :)

Answer 6

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

如果它说no-cache和max-age=0 ，那么你就没有缓存。

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

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

更多信息请访问 Mozilla.org