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

时间:2012-12-09 00:27:17

标签: javascript xmlhttprequest browser-cache

如果可以告诉(在javascript执行中)GET XMLHTTPRequest是否命中浏览器缓存而不是从服务器获取响应?

5 个答案:

答案 0 :(得分:19)

来自XMLHttpRequest spec

  

对于由用户代理导致的304 Not Modified响应   生成的条件请求用户代理必须像服务器一样   给出了200 OK的适当内容回复。

换句话说,即使对于访问浏览器缓存的请求,浏览器也会始终提供状态代码200 OK。

然而,该规范还说:

  

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

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

答案 1 :(得分:3)

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

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

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

  

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

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

  

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

Read more on Status Code

<强>更新
您可以在URL中添加缓存破坏程序,以保证始终访问服务器:

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

答案 2 :(得分:1)

这个答案是基于这样的假设:你的意思是浏览器只有缓存,没有发生304(修改后的,etag等)。

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

答案 3 :(得分:1)

来自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-ageExpires,则可能甚至没有请求在将来。在这种情况下,我不确定应该发生什么。

答案 4 :(得分:0)

您使用的是Firefox的Firebug吗?

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

  Cached or not cached      

并非所有网络请求都相同 - 其中一些是从中加载的   浏览器缓存而不是网络。 Firebug提供状态代码   对于每个请求,您可以快速扫描并查看您的有效性   网站正在使用缓存来优化页面加载时间。

Firebug Net Panel docs are here

Chrome / Safari / Opera都有类似的调试工具。刚刚找到good list here(大多数应该有工具来检查XHR)。


编辑:

为了在某种程度上赎回自己...

作为ibu has answered,我还要先检查回复的状态代码。

如果你正在使用jQuery:

  

statusCode(added 1.5)   地图默认值:{}   数字HTTP代码和函数的映射   响应有相应的代码。例如,以下将   响应状态为404时发出警报:

$.ajax({
  statusCode: {
    404: function() {
      alert("page not found");
    }
  }
});
     

如果请求成功,状态代码功能也会相同   参数作为成功回调;如果它导致错误,他们   采用与错误回调相同的参数。

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