PHP设置图片浏览器缓存方法介绍

php中文网

发布时间：2016-05-25 16:54:53

1755人浏览过

来源于php中文网

原创

不管你是使用php打开浏览器缓存还是使用apache,iis服务器环境来配置我们都是会针对浏览器的cache-control来操作，下面我来给大家介绍PHP设置图片浏览器缓存

cache-control

cache-control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同一个指令。

cache-control 定义是：cache-control = “cache-control” “:” cache-directive。表 1 展示了适用的值。

表 1. 常用 cache-directive 值
Cache-directive	说明
public	所有内容都将被缓存
private	内容只缓存到私有缓存中
no-cache	所有内容都不会被缓存
no-store	所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation	如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age=xxx (xxx is numeric)	缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

在客户端通过浏览器发出第一次请求某一个URL时，根据 HTTP 协议的规定，浏览器会向服务器传送报头(Http Request Header)，服务器端响应同时记录相关属性标记(Http Reponse Header)，服务器端的返回状态会是200，格式类似如下：

立即学习“PHP免费学习笔记（深入）”；

代码如下	复制代码
HTTP/1.1 200 OK Date: Tue, 03 Mar 2009 04:58:40 GMT Content-Type: image/jpeg Content-Length: 83185 Last-Modified: Tue, 24 Feb 2009 08:01:04 GMT cache-control: max-age=2592000 Expires: Thu, 02 Apr 2009 05:14:08 GMT Etag: “5d8c72a5edda8d6a:3239″

客户端第二次请求此URL时，根据 HTTP 协议的规定，浏览器会向服务器传送报头(Http Request Header)，服务器端响应并记录相关记录属性标记文件没有发生改动,服务器端返回304，直接从缓存中读取：

代码如下	复制代码
HTTP/1.x 304 Not Modified Date: Tue, 03 Mar 2009 05:03:56 GMT Content-Type: image/jpeg Content-Length: 83185 Last-Modified: Tue, 24 Feb 2009 08:01:04 GMT cache-control: max-age=2592000 Expires: Thu, 02 Apr 2009 05:14:08 GMT Etag: “5d8c72a5edda8d6a:3239″

一、Last-Modified、Expires和Etag相关工作原理
1、Last-Modified
在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记(Http Reponse Header)此文件在服务期端最后被修改的时间，格式类似这样：

1 Last-Modified: Tue, 24 Feb 2009 08:01:04 GMT
客户端第二次请求此URL时，根据 HTTP 协议的规定，浏览器会向服务器传送 If-Modified-Since 报头(Http Request Header)，询问该时间之后文件是否有被修改过：

1 If-Modified-Since: Tue, 24 Feb 2009 08:01:04 GMT
如果服务器端的资源没有变化，则自动返回 HTTP 304 （Not Changed.）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。从而保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。

注：如果If-Modified-Since的时间比服务器当前时间(当前的请求时间request_time)还晚，会认为是个非法请求

2、Etag工作原理

HTTP 协议规格说明定义ETag为“被请求变量的实体标记” （参见14.19）。

简单点即服务器响应时给请求URL标记，并在HTTP响应头中将其传送到客户端，类似服务器端返回的格式：

1 Etag: “5d8c72a5edda8d6a:3239″
客户端的查询更新格式是这样的：

1 If-None-Match: “5d8c72a5edda8d6a:3239″
如果ETag没改变，则返回状态304。
即:在客户端发出请求后，Http Reponse Header中包含 Etag: “5d8c72a5edda8d6a:3239″
标识，等于告诉Client端，你拿到的这个的资源有表示ID：5d8c72a5edda8d6a:3239。

当下次需要发Request索要同一个URI的时候，浏览器同时发出一个If-None-Match报头( Http Request Header)此时包头中信息包含上次访问得到的Etag: “5d8c72a5edda8d6a:3239″标识。

MovingBoxes实现汽车图片展示

MovingBoxes实现汽车图片展示，键盘方向键（ ← → ）也可以操作左右切换，兼容主流浏览器。使用方法： 1. head区域引用文件 lrtk.css，jquery.js，jquery.movingboxes.js 2. head区域引用插件设置代码 3. 在你的文件中加入区域代码

下载

1 If-None-Match: “5d8c72a5edda8d6a:3239″
这样，Client端等于Cache了两份，服务器端就会比对2者的etag。如果If-None-Match为False，不返回200，返回304 (Not Modified) Response。

3、Expires
给出的日期/时间后，被响应认为是过时。如Expires: Thu, 02 Apr 2009 05:14:08 GMT
需和Last-Modified结合使用。用于控制请求文件的有效时间，当请求数据在有效期内时客户端浏览器从缓存请求数据而不是服务器端. 当缓存中数据失效或过期，才决定从服务器更新数据。

4、Last-Modified和Expires
Last-Modified标识能够节省一点带宽，但是还是逃不掉发一个HTTP请求出去，而且要和Expires一起用。而Expires标识却使得浏览器干脆连HTTP请求都不用发，比如当用户F5或者点击Refresh按钮的时候就算对于有Expires的URI，一样也会发一个HTTP请求出去，所以，Last-Modified还是要用的，而且要和Expires一起用。

5、Etag和Expires
如果服务器端同时设置了Etag和Expires时，Etag原理同样，即与Last-Modified/Etag对应的Http Request Header:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和Web Server发出的Last-Modified,Etag值完全一样；在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后，服务器才能返回304.

6、Last-Modified和Etag
Last-Modified 和ETags请求的http报头一起使用，服务器首先产生 Last-Modified/Etag标记，服务器可在稍后使用它来判断页面是否已经被修改，来决定文件是否继续缓存

过程如下:
1. 客户端请求一个页面（A）。
2. 服务器返回页面A，并在给A加上一个Last-Modified/ETag。
3. 客户端展现该页面，并将页面连同Last-Modified/ETag一起缓存。
4. 客户再次请求页面A，并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。
5. 服务器检查该Last-Modified或ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。

注：
1、Last-Modified和Etag头都是由Web Server发出的Http Reponse Header，Web Server应该同时支持这两种头。
2、Web Server发送完Last-Modified/Etag头给客户端后，客户端会缓存这些头；
3、客户端再次发起相同页面的请求时，将分别发送与Last-Modified/Etag对应的Http Request Header:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和Web Server发出的Last-Modified,Etag值完全一样；
4、通过上述值到服务器端检查，判断文件是否继续缓存；

二、对于非实时交互动态页面中Epires和Etag处理
对数据更新并不频繁、如tag分类归档等等，可以考虑对其cache。简单点就是在非实时交互的动态程序中输出expires和etag标识，让其缓存。但需要注意关闭session，防止http response时http header包含session id标识；

3.1、Expires
如expires.php

代码如下	复制代码
header(’cache-control: max-age=86400,must-revalidate’); header(’Last-Modified: ‘ .gmdate(’D, d M Y H:i:s’) . ‘ GMT’ ); header(”Expires: ” .gmdate (’D, d M Y H:i:s’, time() + ‘86400′ ). ‘ GMT’);

3.2、Etag
根据Http返回状态来处理。当返回304直接从缓存中读取
如etag.php

代码如下	复制代码
cache(); echo date(”Y-m-d H:i:s”); function cache() { $etag = “http://longrujun.name”; if (isset($_SERVER['HTTP_IF_NONE_MATCH']) && $_SERVER['HTTP_IF_NONE_MATCH'] == $etag) { header(’Etag:’.$etag,true,304); exit; } else header(’Etag:’.$etag); }

图片缓存实例

代码如下	复制代码
$imagePath = "path/to/some/image"; $eTag = $imagePath; $eTag .= fileMTime($imagePath); $eTag = md5($eTag); if((isset($_SERVER['HTTP_IF_NONE_MATCH'])) && (stripslashes($_SERVER['HTTP_IF_NONE_MATCH']) == $eTag)) { header("HTTP/1.1 304 Not Modified", TRUE, 304); exit(); } header("ETag: ".$eTag); header("Content-Type: image/png"); readFile($imagePath); exit();

上面的方法超级简单,下面看个完整实例

代码如下

复制代码

$fullpath = '/www/images/' . basename($_GET['img']); //假定文件都在/www/images/下
if (!is_file($fullpath)) {
    header("HTTP/1.0 404 Not Found");
    exit();
}

$info = getImageSize($fullpath); //获取图片信息
if (!$info) {                    //如果不是图片
    header("HTTP/1.0 404 Not Found");
    exit();
}

// 以下凡是header函数都是在输出头部信息。较多。
header('Content-type: '. $info['mime']);          //类似于image/png
header('Content-Length: '. filesize($fullpath)); //文件长度

header('Pragma: ');             //没用，但要设置，防止服务器生成no-cache的可怕字眼

//手动设置过期时间，单位都是秒
$validtime = 48* 60 * 60;    // 48小时

//缓存相对请求的时间，
header('cache-control: ' . 'max-age='. $validtime);

//也很重要的Expires头，功能类似于max-age
//time()+$validtime: 设置期限，到期后才会向服务器提交请求
//gmdate，生成Sun, 01 Mar 2009 04:05:49 +0000 的字符串，而且是GMT标准时区
//preg_replace, 生成Sun, 01 Mar 2009 04:05:49 GMT，注意：可能与服务器设置有关，
//但我都用默认设置
header('Expires:'. preg_replace('/.{5}$/', 'GMT', gmdate('r', time()+ $validtime)));

//文件最后修改时间
$lasttime = filemtime($fullpath);

//最后修改时间，设置了，点击刷新时，浏览器再次请求图片才会发出'IF_MODIFIED_SINCE'头，
//从而被php程序读取
header('Last-Modified: ' . preg_replace('/.{5}$/', 'GMT', gmdate('r', $lasttime) ));

//重要，如果请求中的时间和文件生成时间戳相等，则文件未修改，客户端可用缓存
if (strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == $lasttime) {
    header("HTTP/1.1 304 Not Modified"); //服务器发出文件不曾修改的指令
    exit();
}

//如果文件被修改了，只好重新发出数据
echo file_get_contents($fullpath);