首页 > 技术文章 > 浏览器缓存读取机制大解底

peace1 2016-04-11 16:25 原文

近几天重温了下浏览器缓存相关的知识,不禁好像回到了三年前找工作的时光,为了避免再次忘记,就做下笔记,如有纰漏,忘大神指正

 

概念主要有几个,Cache-control,Expries,Etag,Last-modify,查了下英文字典,发现有三个单词意思差不多,好失望。

先重浏览器加载资源说起吧,

浏览器加载页面,对应页面的资源,假如检测到有缓存的话:

一、先判断浏览器是否过期,判断的方式是:Cache-control和Expries。

  Cache-control和Expries都指明当前资源的有效期,控制浏览器是否读取本地缓存,Cache-control长得好,选项比较多,看脸的时代,好看的必然会比较优先考虑(潜规则)。

  Cache-control :

  1.max-age:指明缓存时间的有效时长,从请求开始时间开始算。

  2.S-maxage:CDN的max-age(不知道什么是CDN?去问百度吧~)。

  3.pubic:任何途径的缓存者(本地缓存,代理服务器(类似上面说的CDN)),都无条件的缓存资源,感觉好像公交车,谁都能上。

  4.private:有公共就会对应有私有,只针对单个用户或窗口缓存资源,被包养的感觉。

  5.no-cache:资源不读取缓存,但是能在本地缓存。

  6.no-store:资源不能再本地缓存(既然没缓存,就只能去找服务器加载了)。

   Expries:

  缓存资源的过期时间,没到过期时间就读缓存

二、过期之后,判断Etag

   根据实体内容生成一段hash字符串,标识资源的状态,由服务端产生。

   在配置了Etag的情况下,第一次请求页面资源时候,本地缓存会在资源添加Etag(类似版本号),在第二次请求时候,请求会带着Etag,服务器会判断Etag是否发生改变来确定能否读取本地缓存,没改变则返回304。

三、在判断了Etag之后,假如不读取本地缓存,则再判断Last-Modified

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

题外话:

Etag对比Last-modified的优点

 a、某些服务器不能精确得到资源的最后修改时间,这样就无法通过最后修改时间判断资源是否更新 

 b、如果资源修改非常频繁,在秒以下的时间内进行修改,而Last-modified只能精确到秒 

 c、一些资源的最后修改时间改变了,但是内容没改变,使用ETag就认为资源还是没有修改的。

浏览器相关操作:

F5:Cache-Control和Expries,这就是开发时候改了东西刷刷浏览器就出现效果了的原因。

Ctrl+F5:Cache-Control和Expries,Etag和Last-modify会无效,有些同学会问,更新资源的时候,那为什么有时候要加长长的版本号才能看到效果呀,没加版本号本地怎么刷资源都是旧的。因为浏览器读取的资源是CDN的资源,而你更新的是服务器的资源,所以先叫运维刷缓存吧。

 

参考资料:

http://www.alloyteam.com/2012/03/web-cache-2-browser-cache/

http://www.alloyteam.com/2016/03/discussion-on-web-caching/

 

推荐阅读