web本地客户端缓存图片实现

系统管理员 2022-08-03 03:27 176阅读 0赞

摘要

1、Etag和Expires中Client 端Http Request Header及Server端Http Reponse Header工作原理。  
2、静态下Apache、Lighttpd和Nginx中Etag和Expires配置  
3、非实时交互动态页面中Etag和Expires处理

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

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是标记页面缓存标识

一、Last-Modified、Expires和Etag相关工作原理

1、Last-Modified

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

Last-Modified: Tue, 24 Feb 2009 08:01:04 GMT

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

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响应头中将其传送到客户端，类似服务器端返回的格式：

Etag: “5d8c72a5edda8d6a:3239″

客户端的查询更新格式是这样的：

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″标识。

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、通过上述值到服务器端检查，判断文件是否继续缓存；

expires指令控制HTTP应答中的“Expires”和“Cache-Control”Header头部信息，启动控制页面缓存的作用

time:可以使用正数或负数。“Expires”头标的值将通过当前系统时间加上设定time值来设定。

time值还控制"Cache-Control"的值：

负数表示no-cache

正数或零表示max-age=time

epoch：指定“Expires”的值为 1 January,1970,00:00:01 GMT

max:指定“Expires”的值为31 December2037 23:59:59GMT,"Cache-Control"的值为10年。

\-1：指定“Expires”的值为当前服务器时间-1s，即永远过期。

off：不修改“Expires”和"Cache-Control"的值  
  
expires使用了特定的时间，并且要求服务器和客户端的是中严格同步。  
而Cache-Control是用max-age指令指定组件被缓存多久。  
对于不支持http1.1的浏览器，还是需要expires来控制。所以最好能指定两个响应头。但HTTP规范规定max-age指令将重写expires头。

一般用于页面变化不是很快的时候，如果缓存过期了，浏览器在重用它之前会首先确认他是否有效，就是一个“条件GET请求”，如果有效，返回304状态码。

expires通过Last-Modified响应头来确定。如图：  
第一次访问：  
请求：  
![0_1310539842W6ck.gif][]  
  
返回：  
![0_13105398535yMA.gif][]  
  
第二次访问：  
请求：  
![0_1310539867bmxu.gif][]  
  
返回：  
![0_1310539879haH8.gif][]  
  
这时返回的状态码是304，而在请求中比第一次多了If-Modified-Since头，和原始服务器中的Last-Modified制作比较，所以实现浏览器缓存并判断是否过期。  
简单的说，Last-Modified 与If-Modified-Since 都是用于记录页面最后修改时间的 HTTP 头信息，只是 Last-Modified 是由服务器往客户端发送的 HTTP 头，而 If-Modified-Since 则是由客户端往服务器发送的头，可以看到，再次请求本地存在的 cache 页面时，客户端会通过 If-Modified-Since 头将先前服务器端发过来的 Last-Modified 最后修改时间戳发送回去，这是为了让服务器端进行验证，通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回新的内容，如果是最新的，则返回304告诉客户端其本地 cache 的页面是最新的，于是客户端就可以直接从本地加载页面了，这样在网络上传输的数据就会大大减少，同时也减轻了服务器的负担。  
  
如果不想让代理或浏览器缓存，加no-cache参数或private参数：  
\# expires 1d;  
add\_header Cache-Control no-cache;  
add\_header Cache-Control private;  
![0_1310539888yVBM.gif][]

etag：

实体标签，是用来确认web服务器和浏览器缓存有效性的一种机制。

原始服务器使用ETag响应头来指定组件的ETag

浏览器通过If-None-Match头将ETag传回原始服务器。如果匹配，返回304  
如图：  
第一次访问：  
请求：  
![0_1310539897M002.gif][]  
  
返回：  
![0_13105399050DzG.gif][]  
  
第二次请求：  
![0_1310539913xGfC.gif][]  
  
返回：  
![0_13105399227wyj.gif][]  
  
依然返回的状态码是304，而在请求中比第一次多了If-None-Match头。所以实现浏览器缓存。如果这个值对不上，则缓存过期。  
ETags和If-None-Match是一种常用的判断资源是否改变的方法。类似于Last-Modified和HTTP-If-Modified-Since。但是有所不同的是Last-Modified和HTTP-If-Modified-Since只判断资源的最后修改时间，而ETags和If-None-Match可以是资源任何的任何属性。  
ETags和If-None-Match的工作原理是在HTTP Response中添加ETags信息。当客户端再次请求该资源时，将在HTTP Request中加入If-None-Match信息（ETags的值）。如果服务器验证资源的ETags没有改变（该资源没有改变），将返回一个304状态；否则，服务器将返回200状态，并返回该资源和新的ETags。  
  
IIS上的ETag格式需要修改。

是选择ETags还是

Etag主要为了解决Last-Modified无法解决的一些问题.他能比Last\_Modified更加精确的知道文件是否被修改过.如果有个文件修改非常频繁，比如在秒以下的时间内进行修改，比如1秒内修改了10次，If-Modified-Since能检查只能秒级的修改，所以这种修改无法判断. 原因是UNIX记录MTIME只能精确到秒。

**在大型多WEB集群时,使用ETag时有问题**,所以有人建议使用WEB集群时不要使用ETag,其实很好解决,因为多服务器时,INode不一样,所以不同的服务器生成的ETag不一样,所以用户有可能重复下载(这时ETag就会不准)

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

如果服务器又设置了Cache-Control:max-age和Expires呢，怎么办？  
**答案是同时使用**，也就是说在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后，服务器才能返回304.(不要陷入到底使用谁的问题怪圈)

浏览器缓存是提高用户体验和提升程序性能的一个很重要的途径，通过浏览器的缓存控制，可以对实时性要求不高的数据进行缓存，可以减少甚至不需要再次对服务器的请求就可以显示数据。

本文将介绍如果通过HTTP协议中的header来控制浏览器的缓存行为，建议大家在看的时候写代码试验下，这样对这些header的理解会更深一点。

HTTP协议定义了四个可以用来控制浏览器缓存的HTTP头，它们是：

Last-Modified  
Expires  
Pragma: no-cache  
Cache-Control

下面分别介绍HTTP/1.0和HTTP/1.1协议下的缓存解决方法。  
  
**HTTP/1.0**

在HTTP/1.0协议中，Last-Modified是控制缓存的一个非常重要的HTTP头。如果需要控制浏览器的缓存，服务器首先必须发送一个 以UTC时间为值的Last-Modifeid头，当第二次访问这个页面时，浏览器会发送一个If-Modified-Since头给服务器，让服务器判 断是否有必要更新内容，这个If-Modified-Since头的值就是上次访问页面时，浏览器发送的Last-Modifeid头的值。

Expires是HTTP/1.0中另外一个很重要的HTTP头，它表示缓存的存在时间，告诉客户端浏览器在这个时间之前不对服务器发送请求，而直接使用浏览器的缓存。

在HTTP/1.0中，可以使用Pragma: no-cache头来告诉浏览器不要缓存内容，它相当于HTTP/1.1中的Cache-Control:no-cache。

如果要使用HTTP/1.0协议来告诉客户端（包括任何中介代理）是否要缓存数据，可以使用以下代码，如果设置liftTime参数则告诉客户端数据缓存的生命期为lifeTime的值：

[view plain][] [copy to clipboard][view plain] [print][view plain] [?][view plain]

1.  function http\_10\_cache\_headers($lifeTime = null)\{  
2.      $gmtime = time();  
3.      if ($lifeTime)\{  
4.          $gmtime += $lifeTime;  
5.      \}else \{  
6.          header("Pragma: no-cache");  
7.      \}  
8.      $gmtime = gmdate('D, d M Y H:i:s',$gmtime).' GMT';  
9.      header("Last-Modified: $gmtime");  
10.     header("Expires: $gmtime");  
11. \}

HTTP/1.0协议的这种实现方式的缺点是，服务器和客户端的时间有可能是不同步的，这样会造成缓存的实现达不到预期效果。HTTP/1.1协议用Cache-Control头解决了这个问题。

**HTTP/1.1**

Cache-Control响应头的语法为：  
Cache-Control = “Cache-Control” “:”; \#缓存响应指令

缓存响应指令为一下几个中的任意一个：

1.  public
2.  private
3.  no-cache
4.  no-store
5.  no-transform
6.  must-revalidate
7.  proxy-revalidate
8.  max-age=时间
9.  s-maxage=时间

详细介绍一下这几个指令的具体含义：

1.  public 指示响应数据可以被任何客户端缓存
2.  private 指示响应数据可以被非共享缓存所缓存。这表明响应的数据可以被发送请求的浏览器缓存，而不能被中介所缓存
3.  no-cache 指示响应数据不能被任何接受响应的客户端所缓存
4.  no-store 指示所传送的响应数据除了不能被缓存，也不能存入磁盘。一般用于敏感数据，以免数据被复制。
5.  must-revalidate 指示所有的缓存都必须重新验证，在这个过程中，浏览器会发送一个If-Modified-Since头。如果服务器程序验证得出当前的响应数据为最新的数 据，那么服务器应当返回一个304 Not Modified响应给客户端，否则响应数据将再次被发送到客户端。
6.  proxy-revalidate 与must-revalidate相似，不同的是用来指示共享缓存。
7.  max-age 数据经过max-age设置的秒数后就会失效，相当于HTTP/1.0中的Expires头。如果在一次响应中同时设置了max-age和Expires，那么max-age将具有较高的优先级。
8.  s-maxage 与max-age相似，不同的是用来指示共享缓存。

了解这些指令后就可以根据不同的需求来发送不同的HTTP头。

根据响应的内容是否更改来确定是否发送新的响应数据：

[view plain][] [copy to clipboard][view plain] [print][view plain] [?][view plain]

1.  function validate\_cache\_headers($my\_modtime)  
2.  \{  
3.      $pretty\_modtime = gmdate('D, d M Y H:i:s', $my\_modtime) . ' GMT';  
4.      if($\_SERVER\['IF\_MODIFIED\_SINCE'\] == $gmt\_mtime) \{  
5.          header("HTTP/1.1 304 Not Modified");  
6.          exit;  
7.      \}  
8.      else \{  
9.          header("Cache-Control: must-revalidate");  
10.         header("Last-Modified: $pretty\_modtime");  
11.     \}  
12. \}

这个函数接受一个页面最后修改的时间作为参数，将它与浏览器发送的If-Modified-Since的时间比较，如果两者相同，说明缓存的数据版 本是最新的，就可以发送一个304状态码给浏览器，让它使用缓存的数据；否则，发送新的Last-Modified头和设置必须验证缓存的数据版本的 Cache-Control头。

如果想要让响应数据被代理缓存一分钟，可以这么做：

[view plain][] [copy to clipboard][view plain] [print][view plain] [?][view plain]

1.  function cache\_novalidate($interval = 60)  
2.  \{  
3.      $now = time();  
4.      $pretty\_lmtime = gmdate('D, d M Y H:i:s', $now) . ' GMT';  
5.      $pretty\_extime = gmdate('D, d M Y H:i:s', $now + $interval) . 'GMT';  
6.      // 向后兼容HTTP/1.0  
7.      header("Last Modified: $pretty\_lmtime");  
8.      header("Expires: $pretty\_extime");  
9.      // 支持HTTP/1.1  
10.     header("Cache-Control: public,max-age=$interval");  
11. \}

如果只想让浏览器缓存响应数据，可以这么做：

[view plain][] [copy to clipboard][view plain] [print][view plain] [?][view plain]

1.  function cache\_browser($interval = 60)  
2.  \{  
3.      $now = time();  
4.      $pretty\_lmtime = gmdate('D, d M Y H:i:s', $now) . ' GMT';  
5.      $pretty\_extime = gmdate('D, d M Y H:i:s', $now + $interval) . ' GMT';  
6.      // 向后兼容HTTP/1.0  
7.      header("Last Modified: $pretty\_lmtime");  
8.      header("Expires: $pretty\_extime");  
9.      // 支持HTTP/1.1  
10.     header("Cache-Control: private,max-age=$interval,s-maxage=0");  
11. \}

如果要让数据不被任何客户端缓存：

[view plain][] [copy to clipboard][view plain] [print][view plain] [?][view plain]

1.  function cache\_none($interval = 60)  
2.  \{  
3.    // 向后兼容HTTP/1.0  
4.    header("Expires: 0");  
5.    header("Pragma: no-cache");  
6.    // 支持HTTP/1.1  
7.    header("Cache-Control: no-cache,no-store,max-age=0,s-maxage=0,must-revalidate");  
8.  \}

当调用session\_start()时，PHP会自动发送一个no-cache类的头来阻止缓存数据，

要注意的是:  
通过POST方法发送的请求不能以如上所述的方式缓存。

[HTTP]: http://www.w3.org/Protocols/rfc2616/rfc2616.html
[Http Request Header]: http://en.wikipedia.org/wiki/List_of_HTTP_headers
[14.19]: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.19
[0_1310539842W6ck.gif]: /images/20220731/286a8c98976342fe84fcb4a504144e6c.png
[0_13105398535yMA.gif]: /images/20220731/f942f8df31df43b5829d9e2644bdb46b.png
[0_1310539867bmxu.gif]: /images/20220731/67dba608d3e04193af575b1d53fa9930.png
[0_1310539879haH8.gif]: /images/20220731/bf96205733f14117a80624b992f75206.png
[0_1310539888yVBM.gif]: /images/20220731/9241535970924b3787381a7293353be4.png
[0_1310539897M002.gif]: /images/20220731/e908bfd4b681477f84b166905dd19c6e.png
[0_13105399050DzG.gif]: /images/20220731/1db212e03a244d31ade6a4b4709a646a.png
[0_1310539913xGfC.gif]: /images/20220731/e7d289661d514c82bbbc7a636778032a.png
[0_13105399227wyj.gif]: /images/20220731/c3564bf9a3944b9093205a139d098559.png
[view plain]: http://www.jimmys.cn/2009/01/20/control-client-cache-by-http-header/#