浏览器缓存读取机制大解底

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

 

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

先重浏览器加载资源提及吧，

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

1、先判断浏览器是否过时，判断的方式是：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:

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

2、过时以后，判断Etag

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

　　 在配置了Etag的状况下，第一次请求页面资源时候，本地缓存会在资源添加Etag（相似版本号），在第二次请求时候，请求会带着Etag，服务器会判断Etag是否发生改变来肯定可否读取本地缓存，没改变则返回304。

3、在判断了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/