伟德体育官网 11

缓存原掌握析,前端浏览器缓存伟德体育官网

浏览器 HTTP 缓存原理分析

2015/10/27 · HTML5 · 1
评论 ·
HTTP

原文出处: 桃子夭夭   

以前项目中遇到了很多浏览器缓存相关的问题,也在网上查过资料,搞过服务器的配置,来确保客户端加载服务器资源的速度和资源有效性。最近仔细看了下http协议中和缓存相关的一些属性,总结一下。

章节目录

一、Cache-Cantrol

  1. max-age(单位为s)指定设置缓存最大的有效时间,定义的是时间长短。当浏览器向服务器发送请求后,在max-age这段时间里浏览器就不会再向服务器发送请求了。
    比如一个css资源,max-age=2592000,也就是说缓存有效期为2592000秒(也就是30天),会配合Date属性。于是在30天内都会使用这个版本的资源,即使服务器上的资源发生了变化,浏览器也不会得到通知。max-age会覆盖掉Expires,后面会有讨论。
    读取缓存数据条件:上次缓存时间(客户端的)+max-age <
    当前时间(客户端的)
  2. s-maxage(单位为s)同max-age,只用于共享缓存(比如CDN缓存)。
    比如,当s-maxage=60时,在这60秒中,即使更新了CDN的内容,浏览器也不会进行请求。也就是说max-age用于普通缓存,而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖掉max-age和Expires
    header。
  3. public
    指定响应会被缓存,并且在多用户(不同的窗口)间共享。如果没有指定public还是private,则默认为public。
  4. private
    响应只作为私有的缓存,不能在用户间共享。如果要求HTTP认证,响应会自动设置为private。private
    响应只能在私有缓存中被缓存,不能放在代理缓存上。对一些用户信息敏感的资源,通常需要设置为private。
  5. no-cache
    指定不缓存响应,表明资源不进行缓存,但是设置了no-cache之后并不代表浏览器不缓存,而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险,还可以加上private指令,将过期时间设为过去的时间。
  6. no-store
    绝对禁止缓存,一看就知道如果用了这个命令当然就是不会进行缓存啦~每次请求资源都要从服务器重新获取。
  7. must-revalidate
    指定如果页面是过期的,则去服务器进行获取。这个指令并不常用,就不做过多的讨论了。

浏览器缓存原理

  • 浏览器缓存原理
  • 文字版描述
  • 一图以蔽之
  • 缓存相关首部字段
  • request缓存相关首部字段
  • response缓存相关首部字段
  • 实体首部缓存相关字段
  • 缓存配置的一些注意事项

二、Expires

缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。也就是说,Expires=max-age
+
请求时间,需要和Last-modified结合使用。但在上面我们提到过,cache-control的优先级更高。
Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。
Expires是较老的强缓存管理header,由于它是服务器返回的一个绝对时间,这样存在一个问题,如果客户端的时间与服务器的时间相差很大(比如时钟不同步,或者跨时区),那么误差就很大,所以在HTTP
1.1版开始,使用Cache-Control: max-age=秒替代。
Cache-Control描述的是一个相对时间,在进行缓存命中的时候,都是利用客户端时间进行判断,所以相比较Expires,Cache-Control的缓存管理更有效,安全一些。

文字版描述

①浏览器第一次访问服务器资源 /index.html

在浏览器中没有缓存文件,直接向服务器发送请求。

服务器返回  200 OK,实体中返回
index.html文件内容,并设置一个缓存过期时间,一个文件修改时间,一个根据index.html内容计算出来的实体标记Entity
Tag,简称Etag。

浏览器将/index.html路径的请求缓存到本地。

②浏览器第二次访问服务器资源 /index.html

由于本地已经有了此路径下的缓存文件,所以这一次就不直接向服务器发送请求了。

首先进行缓存过期判断。浏览器根据①中设置缓存过期时间判断缓存文件是否过期。

情景一:若没有过期,则不向服务器发送请求,直接使用缓存中的结果,此时我们在浏览器控制台中可以看到
 200 OK(from cache)
,此时的情况就是完全使用缓存,浏览器和服务器没有任何交互的。

情景二:若已过期,则向服务器发送请求,此时请求中会带上①中设置的文件修改时间,和Etag

然后进行资源更新判断。服务器根据浏览器传过来的文件修改时间,判断自浏览器上一次请求之后,文件是不是没有被修改过;根据Etag,判断文件内容自上一次请求之后,有没有发生变化

情形一:若两种判断的结论都是文件没有被修改过,则服务器就不给浏览器发index.html的内容了,直接告诉它,文件没有被修改过,你用你那边的缓存吧——
304 Not
Modified,此时浏览器就会从本地缓存中获取index.html的内容。此时的情况叫协议缓存,浏览器和服务器之间有一次请求交互。

情形二:若修改时间和文件内容判断有任意一个没有通过,则服务器会受理此次请求,之后的操作同

①我的文字表达能力可能有限,为了尽量把这个流程描述清楚一点,下面

以前项目中遇到了很多浏览器缓存相关的问题,也在网上查过资料,搞过服务器的配置,来确保客户端加载服务器资源的速度和资源有效性。最近仔细看了下http协议中和缓存相关的一些属性,总结一下。

三、Last-modified

服务器端文件的最后修改时间,需要和cache-control共同使用,是检查服务器端资源是否更新的一种方式。当浏览器再次进行请求时,会向服务器传送If-Modified-Since报头,询问Last-Modified时间点之后资源是否被修改过。如果没有修改,则返回码为304,使用缓存;如果修改过,则再次去服务器请求资源,返回码和首次请求相同为200,资源为服务器最新资源。

一图以蔽之

伟德体育官网 1

伟德体育官网 2

浏览器缓存原理

四、ETag

根据实体内容生成一段hash字符串,标识资源的状态,由服务端产生。浏览器会将这串字符串传回服务器,验证资源是否已经修改,如果没有修改,过程如下:

伟德体育官网 3

使用ETag可以解决Last-modified存在的一些问题:

  • 某些服务器不能精确得到资源的最后修改时间,这样就无法通过最后修改时间判断资源是否更新
  • 如果资源修改非常频繁,在秒以下的时间内进行修改,而Last-modified只能精确到秒
  • 一些资源的最后修改时间改变了,但是内容没改变,使用ETag就认为资源还是没有修改的。

缓存相关首部字段

文字版描述

①浏览器第一次访问服务器资源 /index.html

在浏览器中没有缓存文件,直接向服务器发送请求。

服务器返回  200 OK,实体中返回
index.html文件内容,并设置一个缓存过期时间,一个文件修改时间,一个根据index.html内容计算出来的实体标记Entity
Tag,简称Etag。

浏览器将/index.html路径的请求缓存到本地。

 

②浏览器第二次访问服务器资源 /index.html

由于本地已经有了此路径下的缓存文件,所以这一次就不直接向服务器发送请求了。

首先进行缓存过期判断。浏览器根据①中设置缓存过期时间判断缓存文件是否过期。

情景一:若没有过期,则不向服务器发送请求,直接使用缓存中的结果,此时我们在浏览器控制台中可以看到 
200 OK(from cache)
,此时的情况就是完全使用缓存,浏览器和服务器没有任何交互的。

情景二:若已过期,则向服务器发送请求,此时请求中会带上①中设置的文件修改时间,和Etag

然后进行资源更新判断。服务器根据浏览器传过来的文件修改时间,判断自浏览器上一次请求之后,文件是不是没有被修改过;根据Etag,判断文件内容自上一次请求之后,有没有发生变化

情形一:若两种判断的结论都是文件没有被修改过,则服务器就不给浏览器发index.html的内容了,直接告诉它,文件没有被修改过,你用你那边的缓存吧——
304 Not
Modified,此时浏览器就会从本地缓存中获取index.html的内容。此时的情况叫协议缓存,浏览器和服务器之间有一次请求交互。

情形二:若修改时间和文件内容判断有任意一个没有通过,则服务器会受理此次请求,之后的操作同①

 

我的文字表达能力可能有限,为了尽量把这个流程描述清楚一点,下面

补充

  1. HTTP通过缓存将服务器资源的副本保留一段时间,这段时间称为新鲜度限值。这在一段时间内请求相同资源不会再通过服务器。HTTP协议中Cache-Control

    Expires可以用来设置新鲜度的限值,前者是HTTP1.1中新增的响应头,后者是HTTP1.0中的响应头。二者所做的事时都是相同的,但由于Cache-Control使用的是相对时间,而Expires可能存在客户端与服务器端时间不一样的问题,所以我们更倾向于选择Cache-Control。
  2. 优先级
    EtagLast-modified可靠,哪怕是打开文件再直接进行保存也会刷新Last-modified时间,Cache-Control >Expires
  3. 强缓存和弱缓存区分。强缓存会直接读取浏览器缓存,如Cache-ControlExpires。弱缓存向服务端发出请求,若未修改资源返回304,若资源已更新返回正常的200。Last-modified和ETag属于弱缓存。Expires和Last-modified都需要配合Cache-Control使用,会先判断强缓存是否失效,失效才会需要弱缓存。

request缓存相关首部字段

伟德体育官网 4

① cache-control  用来做缓存过期判断

常用指令:

no-cache  不直接使用缓存,始终向服务器发起请求

max-age
 缓存过期时间,是一个时间数值,比如3600秒,设置为0的时候效果等同于no-cache

s-maxage
 给缓存代理用的指令,对直接返回资源的server无效,当s-maxage生效时,会忽略max-age的值

only-if-cached
若有缓存,则只使用缓存,若缓存文件出问题了,请求也会出问题

② Pragma  用来做缓存过期判断

   它可以取值no-cache

 
 这是一个http1.0遗留的字段,当它和cache-control同时存在的时候,会被cache-control覆盖

③ if-match / if-none-match  用来做资源更新判断

 
 
这个指令会把缓存中的Etag传给服务器,服务器用它来和服务器端的资源Etag进行对比,若不一致则证明资源被修改了,需要响应请求为
200 OK

④ if-modified-since  用来做资源更新判断

   
这个指令会把文件的上一次缓存中的文件的更新时间传给服务器,服务器判断文件在这个时间点后是否被修改,如果被修改过则需要响应请求为200
OK

一图以蔽之

伟德体育官网 5

伟德体育官网 6

附 浏览器刷新与缓存

伟德体育官网 7

response缓存相关首部字段

伟德体育官网 8

① cache-control  用来设置缓存过期时间

常用指令:

no-cache
 让客户端不直接使用缓存,始终向服务器发起请求,不设置默认是这个,上边截图中的请求就是省略了,所以客户端不会直接使用缓存。

max-age
 缓存过期时间,是一个时间数值,比如3600秒,设置为0的时候效果等同于no-cache

s-maxage
 给缓存代理用的指令,对直接返回资源的server无效,当s-maxage生效时,会忽略max-age的值

private/public
 默认是private,只在一个浏览器中缓存,设置为public时缓存可被多个用户共享

② Etag 用来设置根据资源内容生成的实体标签

   
这个值有强tag和弱tag,区别是计算方式不同,只有强tag才会在资源被更新的时候立即发生变化,请求首部中的if-match/if-none-match字段就会传回这个值给服务端

③ age

 
 这个字段用来告诉客户端,这个response是在多久前被创建的,单位为秒,缓存服务器返回资源的时候必须创建此字段

缓存相关首部字段

实体首部缓存相关字段

response的head里边可能还包括实体首部,实体首部是紧跟在response首部后边的。

①last-modified-time ——用来设置资源最后修改时间

②Exprire —— 设置文件过期时间

这个字段的作用和cache-control相同,不同的是它直接指定一个缓存过期时间点,容易受客户端时间的影响。

这也是一个遗留的字段,和cache-control同时存在的时候会被后者覆盖

request缓存相关首部字段

伟德体育官网 9

① cache-control 
用来做缓存过期判断

常用指令:

no-cache  不直接使用缓存,始终向服务器发起请求

max-age 
缓存过期时间,是一个时间数值,比如3600秒,设置为0的时候效果等同于no-cache

s-maxage 
给缓存代理用的指令,对直接返回资源的server无效,当s-maxage生效时,会忽略max-age的值

only-if-cached
若有缓存,则只使用缓存,若缓存文件出问题了,请求也会出问题

② Pragma  用来做缓存过期判断

   它可以取值no-cache

  
这是一个http1.0遗留的字段,当它和cache-control同时存在的时候,会被cache-control覆盖

③ if-match / if-none-match  用来做资源更新判断

  
这个指令会把缓存中的Etag传给服务器,服务器用它来和服务器端的资源Etag进行对比,若不一致则证明资源被修改了,需要响应请求为
200 OK

④ if-modified-since 
用来做资源更新判断

   
这个指令会把文件的上一次缓存中的文件的更新时间传给服务器,服务器判断文件在这个时间点后是否被修改,如果被修改过则需要响应请求为200
OK

缓存配置的一些注意事项

① 只有get请求会被缓存,post请求不会


Etag 在资源分布在多台机器上时,对于同一个资源,不同服务器生成的Etag可能不相同,此时就会导致304协议缓存失效,客户端还是直接从server取资源。可以自己修改服务器端etag的生成方式,根据资源内容生成同样的etag。


系统上线,更新资源时,可以在资源uri后边附上资源修改时间、svn版本号、文件md5
等信息,这样可以避免用户下载到缓存的旧的文件


观察chrome的表现发现,通过链接或者地址栏访问,会先判断缓存是否过期,再判断缓资源是否更新;F5刷新,会跳过缓存过期判断,直接请求服务器,判断资源是否更新。

目前只能回忆起这些了,以后遇到了再补充吧~

1 赞 5 收藏 1
评论

伟德体育官网 10

response缓存相关首部字段

伟德体育官网 11

① cache-control  用来设置缓存过期时间

常用指令:

no-cache 
让客户端不直接使用缓存,始终向服务器发起请求,不设置默认是这个,上边截图中的请求就是省略了,所以客户端不会直接使用缓存。

max-age 
缓存过期时间,是一个时间数值,比如3600秒,设置为0的时候效果等同于no-cache

s-maxage 
给缓存代理用的指令,对直接返回资源的server无效,当s-maxage生效时,会忽略max-age的值

private/public 
默认是private,只在一个浏览器中缓存,设置为public时缓存可被多个用户共享

② Etag 用来设置根据资源内容生成的实体标签

   
这个值有强tag和弱tag,区别是计算方式不同,只有强tag才会在资源被更新的时候立即发生变化,请求首部中的if-match/if-none-match字段就会传回这个值给服务端

③ age

  
这个字段用来告诉客户端,这个response是在多久前被创建的,单位为秒,缓存服务器返回资源的时候必须创建此字段

实体首部缓存相关字段

response的head里边可能还包括实体首部,实体首部是紧跟在response首部后边的。

①last-modified-time ——用来设置资源最后修改时间

②Exprire —— 设置文件过期时间

 
这个字段的作用和cache-control相同,不同的是它直接指定一个缓存过期时间点,容易受客户端时间的影响。

  这也是一个遗留的字段,和cache-control同时存在的时候会被后者覆盖

缓存配置的一些注意事项

① 只有get请求会被缓存,post请求不会

② Etag
在资源分布在多台机器上时,对于同一个资源,不同服务器生成的Etag可能不相同,此时就会导致304协议缓存失效,客户端还是直接从server取资源。可以自己修改服务器端etag的生成方式,根据资源内容生成同样的etag。


系统上线,更新资源时,可以在资源uri后边附上资源修改时间、svn版本号、文件md5
等信息,这样可以避免用户下载到缓存的旧的文件


观察chrome的表现发现,通过链接或者地址栏访问,会先判断缓存是否过期,再判断缓资源是否更新;F5刷新,会跳过缓存过期判断,直接请求服务器,判断资源是否更新。

目前只能回忆起这些了,以后遇到了再补充吧~

发表评论