浏览器缓存详解:expires,cache-control,last-modified,etag详细说明

    xiaoxiao2021-03-25  189

    最近在对CDN进行优化,对浏览器缓存深入研究了一下,记录一下,方便后来者

    画了一个草图:

    每个状态的详细说明如下:

    1Last-Modified

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

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

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

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

    如果服务器端的资源没有变化,则自动返回HTTP304NotChanged.)状态码,内容为空,这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。

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

    2Etag工作原理

    HTTP协议规格说明定义ETag为“被请求变量的实体标记”(参见14.19)。简单点即服务器响应时给请求URL标记,并在HTTP响应头中将其传送到客户端,类似服务器端返回的格式:

    Etag:“5d8c72a5edda8d6a:3239″

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

    If-None-Match:“5d8c72a5edda8d6a:3239″

    如果ETag没改变,则返回状态304

    :在客户端发出请求后,HttpReponse Header中包含Etag:“5d8c72a5edda8d6a:3239″

    标识,等于告诉Client端,你拿到的这个的资源有表示ID5d8c72a5edda8d6a:3239。当下次需要发Request索要同一个URI的时候,浏览器同时发出一个If-None-Match报头(Http RequestHeader)此时包头中信息包含上次访问得到的Etag:“5d8c72a5edda8d6a:3239″标识。

    If-None-Match:“5d8c72a5edda8d6a:3239“

    ,这样,Client端等于Cache了两份,服务器端就会比对2者的etag。如果If-None-MatchFalse,不返回200,返回304(Not Modified) Response

    3Expires

    给出的日期/时间后,被响应认为是过时。如Expires:Thu, 02 Apr 2009 05:14:08 GMT

    需和Last-Modified结合使用。用于控制请求文件的有效时间,当请求数据在有效期内时客户端浏览器从缓存请求数据而不是服务器端.当缓存中数据失效或过期,才决定从服务器更新数据。

    4Last-ModifiedExpires

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

    5EtagExpires

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

    6Last-ModifiedEtag

    分布式系统里多台机器间文件的last-modified必须保持一致,以免负载均衡到不同机器导致比对失败

    分布式系统尽量关闭掉Etag(每台机器生成的etag都会不一样)

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

    过程如下:

    1.客户端请求一个页面(A)。

    2.服务器返回页面A,并在给A加上一个Last-Modified/ETag

    3.客户端展现该页面,并将页面连同Last-Modified/ETag一起缓存。

    4.客户再次请求页面A,并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。

    5.服务器检查该Last-ModifiedETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304和一个空的响应体。

    注:

    1Last-ModifiedEtag头都是由WebServer发出的HttpReponse HeaderWebServer应该同时支持这两种头。

    2WebServer发送完Last-Modified/Etag头给客户端后,客户端会缓存这些头;

    3、客户端再次发起相同页面的请求时,将分别发送与Last-Modified/Etag对应的HttpRequestHeader:If-Modified-SinceIf-None-Match。我们可以看到这两个Header的值和WebServer发出的Last-Modified,Etag值完全一样;

    4、通过上述值到服务器端检查,判断文件是否继续缓存;

    7、关于 Cache-Control: max-age=秒 和 Expires

    Expires = 时间,HTTP 1.0 版本,缓存的载止时间,允许客户端在这个时间之前不去检查(发请求) max-age = 秒,HTTP 1.1版本,资源在本地缓存多少秒。 如果max-age和Expires同时存在,则被Cache-Control的max-age覆盖。

    Expires 的一个缺点就是,返回的到期时间是服务器端的时间,这样存在一个问题,如果客户端的时间与服务器的时间相差很大,那么误差就很大,所以在HTTP 1.1版开始,使用Cache-Control: max-age=秒替代。

    Expires =max-age +   “每次下载时的当前的request时间”

    所以一旦重新下载的页面后,expires就重新计算一次,但last-modified不会变化 

    上面转自http://blog.csdn.net/eroswang/article/details/8302191

    =================================下面是另一篇博客=================================================================

    HTTP Caching 用好了,可以极大的减小服务器负载和减少网络带宽。十分有必要深入了解下 http 的 caching 协议。

      先来看下请求/响应过程:

    http 请求/响应

      1、用 Last-Modified 头

      在第一次请求的响应头返回 Last-Modified 内容,时间格式如:Wed, 22 Jul 2009 07:08:07 GMT。是零时区的 GMT 时间,servlet 中可以用 response.addDateHeader ("Last-Modified", date.getTime ()); 加入响应头。如图:

    last-modified 和 If-Modified-Since

      Last-Modified 与 If-Modified-Since 对应的,前者是响应头,后者是请求头。服务器要处理 If-Modified-Since 请求头与 Last-Modified 对比看是否有更新,如果没有更新就返回 304 响应,否则按正常请求处理。如果要在动态内容中使用它们,那就要程序来处理了。

      ps:servlet 取 If-Modified-Since 可以用 long last = requst.getDateHeader ("If-Modified-Since");

      2、用 Etag 头

      很多时间可能不能用时间来确定内容是否有更新。那可以用 Etag 头,etag 是以内容计算一个标识。计算的方式可以自己决定,比如可以用 crc32、md5等。

    Etag 和 If-None-Match

      Etag 与 If-None-Match 是对应的,前者是响应头,后者是请求头。服务器要判断请求内容计算得到的 etag 是否与请求头 If-None-Match 是否一致,如果一致就表示没有更新,返回 304 就可,否则按正常请求处理。可以参考:用 HttpServletResponseWrapper 实现 Etag 过滤器

      3、用 Expires 头,过期时间

      当请求的内容有 Expires 头的时候,浏览器会在这个时间内不去下载这个请求的内容(这个行为对 F5 或 Ctrl+F2 无效,用 IE7,Firefox 3.5 试了,有效的比如:在地址输入后回车)。

    expires 过期时间

      在 servlet 中可以用 response.addDateHeader ("Expires", date.getTime ()); 添加过期内容。

      ps:在 httpwatch 中可以看到 Result 为 (Cached) 状态的。

      4、用 max-age 的 Cache-Control 头

      max-age 的值表示,多少秒后失效,在失效之前,浏览器不会去下载请求的内容(当然,这个行为对 F5 或 Ctrl+F2 无效)。比如:服务器写 max-age 响应:response.addHeader ("Cache-Control", "max-age=10");

      ps:如果你还要加一些 Cache-Control 的内容,比如:private,最好不要写两个 addHeader,而是一个 response.addHeader ("Cache-Control", "private, max-age=10"); 否则 ie 可能对 max-age 无效,原因它只读第一个 Cache-Control 头。

      小结:

      Last-Modified 与 Etag 头(即是方式 1 和2)还是要请求服务器的,只是仅返回 304  头,不返回内容。所以浏览怎么 F5 ,304 都是有效的。但用 Ctrl+F5 是全新请求的(这是浏览器行为,不发送缓存相关的头)。

      Expires 头与 max-age 缓存是不需要请求服务器的,直接从本地缓存中取。但 F5 会忽视缓存(所以使用 httpwatch 之类的 http 协议监察工具时,不要 F5 误认为 Expires 和 max-age 是无效的)。

      http 协议监察工具:

      Firebox:httpfox、live http header

      IE:httpwatch、iehttpheader

    上面转自http://www.cnblogs.com/fsjohnhuang/archive/2011/12/14/2287791.html
    转载请注明原文地址: https://ju.6miu.com/read-1667.html

    最新回复(0)