浏览器的缓存机制

客户端跟浏览器的交互需要遵循的协议叫做http协议，由服务端返回的数据我们一般称之为响应数据，而响应数据又分为响应头和响应体。响应头的形式是键值对的形式，可以为不同的字段设置不同的值来指导浏览器是否对请求的内容进行缓存，以及如何进行缓存等。
为什么使用缓存：
(1)减少网络带宽
(2)减低服务器压力
(3)减少网络延迟，加快页面打开速度
简单来说，浏览器的缓存就是把一个已经请求过的web资源(如html页面，图片，js，数据等)拷贝一份副本存储到本地的一个文件夹中。当下一个请求来到的时候，如果是相同的url，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向原服务器再次发送请求。下面我们用一张图详细介绍一下浏览器的缓存机制：

图片来源于这篇博客
当用户请求某个网络资源时，浏览器会先判断是否有缓存(a过程)，如果没有缓存，则会向服务器发送请求，如果有缓存，还要判断缓存是否过期(b过程)，如果没有过期，则直接从缓存读取数据，如果缓存已经过期，则会向服务器发送请求并判断本地资源是否过期(c过程)，请求中会携带两个标识，Etag和Last-modified，通过检查两个中任意一个即可。如果未过期，则服务器会给浏览器返回一个304状态码，这时浏览器不会重新下载资源，而是可以直接从缓存中读取数据。如果已经过期，则需要重新从服务器下载资源。
Etag: 是服务端对不同的文件通过固定的算法生成的唯一一个hash值，当文件被修改时，这个hash值也会改变。这时，只需要判断本地缓存中的资源和服务端资源中的hash值是否一致即可。
Last-modified: 表示最后一次修改文件时间。如果本地缓存中的时间大于服务器端的时间，则表示资源未被修改。
三个过程详解
从以上的描述中，可以发现浏览器缓存机制主要可以分为三个过程： a过程，b过程和c过程；
a过程：每个浏览器都会在本地有不同的缓存地址，判断是否有缓存的过程就是判断本地缓存中是否有相应文件的过程，即文件查找过程。
b过程：判断缓存是否过期需要根据两个字段名：expires和cache-control
expires：表示过期时间，注意此处的时间指的都是服务器的时间。
expires: Thu, 28 Sep 2017 06:38:37 GMT
Cache-control: 可以看成是expires的补充，使用的是相对时间的概念。
(1) max-age: 设置缓存的最大的有效时间，单位为s。max-age会覆盖掉expires.
(2)s-maxage: 只用于共享缓存，比如CDN缓存（s -> share）。与max-age 的区别是：max-age用于普通缓存，而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖max-age 和 Expires.
(3) public: 响应会被缓存，并且在多用户间共享。默认是public。
(4)private: 响应只作为私有的缓存，不能在用户间共享。如果要求http认证，响应会自动设置为private。
(5)no-cache:告诉浏览器每次请求资源时，忽略缓存副本，强制浏览器每次发送请求直接发送给服务器，从服务器中拉取资源，但不是“不缓存”。
(6)no-store: 绝对禁止缓存
所以判断缓存是否过期的步骤是：先查看是否设置了cache-control的max-age值，如果设置了该值，则用服务器的时间date值+max-age值计算出新的过期时间，将当前时间与过期时间进行比较，判断是否过期；如果没有设置cache-control，则根据expire设定的日期判断是否过期。
c过程
到这一步的时候，浏览器会向服务器发送请求，同时如果上一次的缓存中有Last-modified和Etag字段，浏览器将在request header中加入If-modified-since(对应于Last-modified)，和If-None-Match(对应于Etag)。
If-modified-Since：客户端保留的资源上次的修改时间。
If-None-Match：客户端保留的内容标识。