HTTP-CAHCE中的CACHE-CONTROL、Etag、Modify

Posted on | Edited on | In | Comments:

用世界上最好的语言演示一下etag

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
// apache 服务器，如果您是nginx请自行配置读取header等信息，同时下面会有nginx测试
$file = 'etag.txt';
$etag = md5_file($file);
$headers = apache_request_headers();
if (isset($headers['If-None-Match']) && trim($headers["If-None-Match"]) == $etag) {
    header("HTTP/1.1 304 Not Modified");
} else {
    $content = file_get_contents($file);
    header("Etag: $etag");
    echo $content;
}

第一次请求，服务器返回200.我分别列下请求头【RequsetHeaders】和响应头【ResponseHeaders】

请求头

1
2
3
4
5
6
7
8
9
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Host:kache.com
Pragma:no-cache
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.

响应头

1
2
3
4
5
6
7
8
9
10
11
12
13
Request URL:http://kache.com/etag.php
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:80
Connection:Keep-Alive
Content-Type:text/html
Date:Tue, 07 Mar 2017 13:02:13 GMT
Etag:966aa4bd5183fd9358fd222647c5c6a3
Keep-Alive:timeout=5, max=99
Server:Apache/2.4.10 (Win32) OpenSSL/0.9.8zb mod_fcgid/2.3.9
Transfer-Encoding:chunked
X-Powered-By:PHP/5.4.33

需要注意第一次请求头没有If-None-Match:，注意第一次响应头有Etag:这个标签,注意第一次是200

第二次请求

请求头：

1
2
3
4
5
6
7
8
9
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
Cache-Control:max-age=0
Connection:keep-alive
Host:kache.com
If-None-Match:966aa4bd5183fd9358fd222647c5c6a3
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

响应头:

1
2
3
4
5
6
7
8
9
Request URL:http://kache.com/etag.php
Request Method:GET
Status Code:304 Not Modified
Remote Address:127.0.0.1:80
Connection:Keep-Alive
Date:Tue, 07 Mar 2017 13:02:16 GMT
Keep-Alive:timeout=5, max=98
Server:Apache/2.4.10 (Win32) OpenSSL/0.9.8zb mod_fcgid/2.3.9

需要注意第二次请求头有If-None-Match:，注意第二次响应为304

再用php语言演示一下Last-Modified

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
/**
 *If-Modified-Since[request] & Last-Modified [response]
 *减少网络字节传输
 */
$headers = apache_request_headers();
$file = 'modified.txt';
if (isset($headers['If-Modified-Since']) && (strtotime($headers['If-Modified-Since']) == filemtime($file))) {
    header('Last-Modified: ' . gmdate('D, d M Y H:i:s', filemtime($file)) . ' GMT', true, 304);
} else {
    header('Last-Modified: ' . gmdate('D, d M Y H:i:s', filemtime($file)) . ' GMT', true, 200);
    $content = file_get_contents($file);
    echo $content;
}

If-Modified-Since[请求头的] 和 Last-Modified [响应头的]这一对关系的HADER头我这里就不贴了。稍后的ppt里有比较详细的说明

我们常用的就是Last-Modified和Etag一起来用，上php代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
$file='etag_modify.txt';
$last_modified_time=filemtime($file);
$etag = md5_file($file);
$headers = apache_request_headers();
if (@strtotime($headers['If-Modified-Since']) == $last_modified_time ||
    @trim($headers['If-None-Match']) == $etag) {
  header('Content-Length: '.filesize($file));
    header("HTTP/1.1 304 Not Modified");
}else{
  header("Etag: $etag");
  header('Last-Modified: '.gmdate('D, d M Y H:i:s', $last_modified_time).' GMT', true, 200);
  header('Content-Length: '.filesize($file));
  $content=file_get_contents($file);
  echo $content;
}

这样做的好处是双重验证，同时满足两者条件才会缓存失效，弥补了modify的粒度最多为秒的问题以及modify的打开关闭即更改时间的问题。当然etag也会有坑，不同物理机可能会导致相同文件不同结果（没实验过）

直接上NGINX配置示例

毕竟php做服务端水平有限，大家可以参考 swoole framework OR workerman中对etag和modify的处理。

不多说，上NGINX配置段，为了演示modify ，可以在/etc/nginx/nginx.conf中把etag关闭

1
2
3
4
5
6
7
http {
        ##
        # Basic Settings
        ##
        etag  off;
        ...

关于其他静态文件缓存的设置

1
2
3
4
5
6
location ~* \.(?:css)$ {
  #expires 1y;
  add_header  Cache-Control max-age=5;
  add_header Cache-Control "public";
  add_header  Last-Modified "";
}

简单对以上括号内代码说明：

  1. expires 1y; 是http协议1.0写法，1.1对应的是cache-contorl:max-age=’’;前者为GMT绝对时间，后者为相对时间。
  2. add_header Cache-Control max-age=5; 缓存5秒，如果没有Last-Modified（即设置了 add_header Last-Modified “”;） ，期间会一直直接请求服务器，服务器一直返回200，如果有设置Last-Modified，5秒后会请求一次服务器，5秒前会返回304.

简单归纳Last-Modified和max-age（expires）关系

  1. 如果设置了max-age=0，而没有启用modify，那么不会缓存

  2. 如果单单启用modify，而没有max-age==0.也会缓存

  3. 如果启用了modify，并且 max-age=0，那么不会缓存

  4. 如果设置了max-age=1000，但没有启用modify ，不会缓存

再此说明上面配置导致的结果：5秒内如果文件有变化，那么客户端不会有任何感知。5秒后将会重新发起请求，得到200响应。然后再缓存5秒【注意没有开启etag】

下面这个例子和上面一样，是针对图片等，缓存1一个月，即使服务端删除了，1个月内也会正常显示（除非ctrl+f5，或者服务端重启了）public代表任何代理服务器都可以缓存，对应的为private，只允许客户端浏览器缓存。

1
2
3
4
5
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
  expires 1M;
  add_header Cache-Control "public";
  add_header  Last-Modified "";
}

那需要有更改就更新，怎么办？

1
2
3
4
5
6
location ~* \.(?:css)$ {
  expires 1y;
 # add_header  Cache-Control max-age=5;
 # add_header Cache-Control "public";
 # add_header  Last-Modified "";
}

以上配置虽然过期时间是一年，但是服务端会返回Last-Modified，来确认，意思为你就vim了一下xx.css,即使没有做任何更改，浏览器也会重新发起请求。你要是没改，那八成就一年后见了。

那我就不想缓存怎么办？

用cache-control：控制
用no-cahce【浏览器端等可以缓存，但是没有什么卵用】
用no-store【浏览器端等不用缓存，不用费劲。每次都跟我服务端请求】
用must-revalidate，浏览器端别整没用的，到期了就马上跟我请求。麻溜的必须。防止的就是代理服务器等自作聪明，认为没有过期。

1
2
3
4
location ~* \.(?:js)$ {
  add_header  Cache-Control no-cache;
  add_header  Cache-Control must-revalidate;
}

测试代码和PPT在这里