浏览器缓存测试情况

2016-12-22

no-cache的情况

1
2
3
4
5
6
7
HTTP/1.1 200 OK
Cache-Control: no-cache
Content-Type: image/png
Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT
Accept-Ranges: bytes
Date: Thu, 10 Nov 2016 02:48:50 GMT
Content-Length: 3534
打开方式 chrome safari firefox
刷新 304 304 304
链接打开 304 304 304
地址栏回车 304 304 304

304的原因是：请求头里带上了If-Modified-Since，这个请求头是判断Last-Modified的时间是否大于http连接建立时间，没有大于，所以返回304

no-store的情况

1
2
3
4
5
6
7
HTTP/1.1 200 OK
Cache-Control: no-store
Content-Type: image/png
Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT
Accept-Ranges: bytes
Date: Thu, 10 Nov 2016 02:48:50 GMT
Content-Length: 3534
打开方式 chrome safari firefox
刷新 200 200 200
链接打开 200 200 200
地址栏回车 200 200 200

新鲜度有效的情况

  • 在响应头中Cache Control 或Expiels没有的情况下
  • public
  • private
  • max-age=大于0的数值
打开方式 chrome safari firefox
刷新 from cache 304 304
链接打开 from cache from cache from cache
地址栏回车 from cache from cache from cache

注意：

  • Safari和firefox在刷新的时候出现304是因为刷新时浏览器在请求头上设置了Cache-Control: max-age=0，而chrome并不会

  • 对于刚刚修改了的文件，且没有设置max-age或max-age很小的，二次加载资源的时间和第一次加载资源的时间间隔较长，是不会出现以下的结果，因为新鲜度是有时间限制的, 修改时间离请求建立时间越短，新鲜度有效期越短，（说明这个文件改动频繁，就不需要缓存太长时间）

    max-age = (Date.now() - Last-Modified) * 10%