HTTP缓存笔记

来源：互联网发布：类似evisu的潮牌知乎编辑：程序博客网时间：2024/05/22 21:49

浏览器缓存的三种方法
1，Etag #缓存Etag标识（nginx没有支持）
2，Last-Modified #最后修改时间
3，Expires Cache-Control #缓存强制过期时间
三种浏览器请求方法：
1，F5
2，Ctrl+F5

3，浏览器敲击回车或转到

在一台测试机上部署Nginx，分别测试三种浏览器的请求方法和缓存

1，一次正常的请求

HTTP/1.1 200 OKServer: nginxDate: Wed, 22 Aug 2012 12:36:05 GMTContent-Type: image/jpegContent-Length: 13137Last-Modified: Wed, 22 Aug 2012 12:35:41 GMTConnection: keep-aliveAccept-Ranges: bytesRequest Headerspretty printGET /2.jpg HTTP/1.1 #请求Host: 192.168.0.246User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip, deflateConnection: keep-alive

第一次应答web服务器会主动带上Last-Modified

2,第二次请求 F5

HTTP/1.1 304 Not ModifiedServer: nginxDate: Wed, 22 Aug 2012 12:37:45 GMTLast-Modified: Wed, 22 Aug 2012 12:35:41 GMTConnection: keep-aliveRequest Headerspretty printGET /2.jpg HTTP/1.1Host: 192.168.0.246User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip, deflateConnection: keep-aliveIf-Modified-Since: Wed, 22 Aug 2012 12:35:41 GMTCache-Control: max-age=0

可以看到第二次get的时候会带上一个If-Modified-Since即从上次时间有没有更改，GMT是格林尼治时间。而应答则返回Last-Modified 时间是一致的，则返回304，可以使用本地缓存。

3，第三次请求Ctrl+F5

HTTP/1.1 200 OKServer: nginxDate: Wed, 22 Aug 2012 12:39:08 GMTContent-Type: image/jpegContent-Length: 13137Last-Modified: Wed, 22 Aug 2012 12:35:41 GMTConnection: keep-aliveAccept-Ranges: bytesRequest Headerspretty printGET /2.jpg HTTP/1.1Host: 192.168.0.246User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip, deflateConnection: keep-alivePragma: no-cacheCache-Control: no-cache

因为Ctrl+F5是强制刷新，本地缓存不起任何作用，类似第一次请求，而web服务器在应答的时候仍然返回:Last-Modified

Expires实验：

在Nginx调整加入expires时间

一次请求

HTTP/1.1 200 OKServer: nginxDate: Wed, 22 Aug 2012 12:41:28 GMTContent-Type: image/jpegContent-Length: 13137Last-Modified: Wed, 22 Aug 2012 12:40:57 GMTConnection: keep-aliveExpires: Thu, 23 Aug 2012 12:41:28 GMTCache-Control: max-age=86400Accept-Ranges: bytesRequest Headerspretty printGET /3.jpg HTTP/1.1Host: 192.168.0.246User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip, deflateConnection: keep-alive

这是一次正常的请求，因为在Nginx配置中加了如下配置：

   location / {            root html;            index  index.html index.htm index.jsp;            expires 1d;        }

即强制缓存过期时间为一天。而此时web服务器的返回正如我设置的一样，

Cache-Control: max-age=86400

此时web服务器仍然返回了Last-Modified.

第二次请求：

3，第三次请求 F5Response Headerspretty print

3，第三次请求 F5Response Headerspretty printHTTP/1.1 304 Not ModifiedServer: nginxDate: Wed, 22 Aug 2012 12:43:36 GMTLast-Modified: Wed, 22 Aug 2012 12:40:57 GMTConnection: keep-aliveExpires: Thu, 23 Aug 2012 12:43:36 GMTCache-Control: max-age=86400Request Headerspretty printGET /3.jpg HTTP/1.1Host: 192.168.0.246User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip, deflateConnection: keep-aliveIf-Modified-Since: Wed, 22 Aug 2012 12:40:57 GMTCache-Control: max-age=0

发现此时，请求依然带上了If-Modified-Since 而Cache-Control却变成了0.即不起作用了。web的应答依然是304，

可以知道此时的expires时间是不起任何作用的。

4，强制Ctrl+F5

HTTP/1.1 200 OKServer: nginxDate: Wed, 22 Aug 2012 12:44:36 GMTContent-Type: image/jpegContent-Length: 13137Last-Modified: Wed, 22 Aug 2012 12:40:57 GMTConnection: keep-aliveExpires: Thu, 23 Aug 2012 12:44:36 GMTCache-Control: max-age=86400Accept-Ranges: bytesRequest Headerspretty printGET /3.jpg HTTP/1.1Host: 192.168.0.246User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip, deflateConnection: keep-alivePragma: no-cacheCache-Control: no-cache

发现此时Last-Modified也已经不起作用了，类似第一次，请求。

5，直接回车

此时发现并没有任何请求向web服务器发送，而是直接使用了本地缓存。

由于Ngingx并不支持Etag 所以没有测试