浏览器的缓存机制cache-control

在web网站的开发过程中,浏览器缓存机制是一个比较重要的话题,了解这方面有助于开发以及网站性能的提高.

浏览器缓存分类

1.强缓存:
指浏览器直接从浏览器缓存中读取资源,不请求服务器,状态码显示200,并且size显示from disk cache或from memory cache;

2.协商缓存
指浏览器向服务器发送请求,并且根据request headers中携带的数据判断是否需要从缓存中读取,如果判断资源未发生变动,则返回304,并且从通过新的response header让浏览器从缓存中读取资源;

强缓存

资源强缓存,主要是跟max-age有关,也就初次请求资源中携带的过期时间,主要跟expires和cache-control有关
expires
指资源到期时间,是个具体的时间,如果当前时间在这个expires时间内,则命中强缓存(上面Date表示资源请求的服务器时间),如果本地时间跟服务器时间差别较大时,可能会有点影响.

cache-control
贴一张cache-control的值,当值为public或者max-age=***时可能会命中强缓存.不过现在资源一般都使用no-cache

cache-control的优先级高于expires,expires是http1.0的产物,而cache-control是http1.1的产物,在不支持http1.1的情况下可能就需要expires来保持兼容.

协商缓存

简单来讲,就是首次请求资源时,资源返回的response header中会带有ETag或者Last-Modified,之后重新请求资源的时候回带上这部分信息,跟服务器上对应的值进行对应,判断资源是否发生改变

ETag 对应 If-None-Match
Last-Modified 对应 If-Modified-Since

还有一个Pragma

功能同cache-control:no-cache,为了兼容一些支持http1.0的请求
ETag和Last-Modified的区别

• 1.ETag更精准,Last-Modified的时间精度是秒,如果一个文件在一秒内改变多次,则Last-Modified不会发生变化,同时如果设置了负载均衡,则不同的服务器上的Last-Modified也可能不同,而ETag每次文件改变都会生成一个全新的值;
• 2.Last-Modified性能更好,Last-Modified只是个时间,而ETag需要执行一定算法生成;
• 3.ETag优先级高于Last-Modified

浏览器资源请求的流程

• 1.首次请求资源,请求服务器,服务器返回带有request header的资源,状态码200;
• 2.再次请求资源,判断资源过期时间,
  资源未过期:命中强缓存,状态码200;
  资源过期:向服务器发送请求;
• 3.服务器根据request header中的资源标识(etag,last-modified),与服务器上的资源进行对应:
  如果资源改变,带上新的资源标识返回,状态码200
  如果资源未变,命中协商缓存,从浏览器缓存读取资源,状态码304

用户对浏览器缓存机制的控制

• 1.地址栏访问,按下回车,执行浏览器缓存机制;
• 2.F5刷新,跳过强缓存,向服务器发送请求,判断是否需要执行协商缓存;
• 3.Ctrl+F5,跳过强缓存和协商缓存,直接从服务器拉取资源.

注意

1.开启浏览器缓存需要打开这个开关