HTTP缓存笔记

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

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

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

1，一次正常的请求

HTTP/1.1 200 OK
Server: nginx
Date: Wed, 22 Aug 2012 12:36:05 GMT
Content-Type: image/jpeg
Content-Length: 13137
Last-Modified: Wed, 22 Aug 2012 12:35:41 GMT
Connection: keep-alive
Accept-Ranges: bytes

Request Headerspretty print

GET /2.jpg HTTP/1.1 #请求
Host: 192.168.0.246
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive

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

2,第二次请求 F5

HTTP/1.1 304 Not Modified
Server: nginx
Date: Wed, 22 Aug 2012 12:37:45 GMT
Last-Modified: Wed, 22 Aug 2012 12:35:41 GMT
Connection: keep-alive


Request Headerspretty print


GET /2.jpg HTTP/1.1
Host: 192.168.0.246
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
If-Modified-Since: Wed, 22 Aug 2012 12:35:41 GMT
Cache-Control: max-age=0

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

3，第三次请求Ctrl+F5

HTTP/1.1 200 OK
Server: nginx
Date: Wed, 22 Aug 2012 12:39:08 GMT
Content-Type: image/jpeg
Content-Length: 13137
Last-Modified: Wed, 22 Aug 2012 12:35:41 GMT
Connection: keep-alive
Accept-Ranges: bytes

Request Headerspretty print

GET /2.jpg HTTP/1.1
Host: 192.168.0.246
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

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

Expires实验：

在Nginx调整加入expires时间

一次请求

HTTP/1.1 200 OK
Server: nginx
Date: Wed, 22 Aug 2012 12:41:28 GMT
Content-Type: image/jpeg
Content-Length: 13137
Last-Modified: Wed, 22 Aug 2012 12:40:57 GMT
Connection: keep-alive
Expires: Thu, 23 Aug 2012 12:41:28 GMT
Cache-Control: max-age=86400
Accept-Ranges: bytes

Request Headerspretty print

GET /3.jpg HTTP/1.1
Host: 192.168.0.246
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: 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，第三次请求 F5
Response Headerspretty print

HTTP/1.1 304 Not Modified
Server: nginx
Date: Wed, 22 Aug 2012 12:43:36 GMT
Last-Modified: Wed, 22 Aug 2012 12:40:57 GMT
Connection: keep-alive
Expires: Thu, 23 Aug 2012 12:43:36 GMT
Cache-Control: max-age=86400

Request Headerspretty print

GET /3.jpg HTTP/1.1
Host: 192.168.0.246
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
If-Modified-Since: Wed, 22 Aug 2012 12:40:57 GMT
Cache-Control: max-age=0
发现此时，请求依然带上了If-Modified-Since 而Cache-Control却变成了0.即不起作用了。web的应答依然是304，

可以知道此时的expires时间是不起任何作用的。
4，强制Ctrl+F5

HTTP/1.1 200 OK
Server: nginx
Date: Wed, 22 Aug 2012 12:44:36 GMT
Content-Type: image/jpeg
Content-Length: 13137
Last-Modified: Wed, 22 Aug 2012 12:40:57 GMT
Connection: keep-alive
Expires: Thu, 23 Aug 2012 12:44:36 GMT
Cache-Control: max-age=86400
Accept-Ranges: bytes

Request Headerspretty print

GET /3.jpg HTTP/1.1
Host: 192.168.0.246
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

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

5，直接回车
此时发现并没有任何请求向web服务器发送，而是直接使用了本地缓存。
由于Ngingx并不支持Etag 所以没有测试