前端缓存机制——强缓存、弱缓存、启发式缓存

强缓存和弱缓存的主要区别是主要区别在于缓存头携带的信息不同。

强缓存：

浏览器发起请求，查询浏览器的本地缓存，如果找到资源，则直接在浏览器中使用该资源。若是未找到，或者资源已过期，则浏览器缓存返回未找到资源的信息，浏览器重新发起服务器请求，由服务器提供所需要的资源，服务器返回请求的资源后，浏览器将该资源存入浏览器的缓存中，以提供下一次使用。

找到所需资源

未找到所需资源

弱缓存（协商缓存）：

协商缓存是在强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识来决定是否使用缓存。

弱缓存生效

弱缓存失效

启发式缓存：

在强缓存中了解到缓存有效期由Expires和Cache-Control中的max-age来决定的，那么如果响应头中不存在这两个字段，缓存的有效期怎么计算？浏览器还会走强缓存吗？这就是启发式缓存解决的问题。

当报头中没有用来确定强缓存时间的字段时，浏览器会触发启发式缓存，缓存有效期计算公式：

                                                

                            (date - last-modified ) * 10%

取响应报头中 date 与 last-modified 值之差的百分之十作为缓存时间。

首部字段解析

强缓存：

从上文中可以看出，合理设置强缓存可以减少不必要的服务端请求，提升网页打开速度。设置强缓存的奥秘就在于请求头和响应头中的首部字段，一起来看一下和强缓存相关的首部字段吧。

Expires 首部字段是 HTTP/1.0 中定义缓存的字段，其给出了缓存过期的绝对时间，即在此时间之后，响应资源过期。

Cache-Control 首部字段是 HTTP/1.1 中定义缓存的字段，其用于控制缓存的行为，可以组合使用多种指令，多个指令之间可以通过 “,” 分隔，常用的指令有：max-age、s-maxage、public/private、no-cache/no store 等。

max-age： 给出了缓存的相对时间，单位为秒，即获得响应之后多少秒后过期，和Expires同时出现时，max-age优先级更高。
s-maxage：对公共缓存服务器生效，表示该资源在公共服务器中缓存的相对时间。如果存在公共缓存服务器，浏览器缓存失效后，会先请求公共缓存服务器，公共缓存服务器失效后会重新请求资源服务器更新公共缓存服务器中的资源，然后返回给浏览器。
public：表示可以被任何节点缓存，包括客户端和公共缓存服务器。
private：表示该资源只能被客户端（浏览器）缓存。
no-cache ：表示客户端每次使用缓存资源前必须向服务器确认其有效性。
no-store ：表示不缓存资源。

弱缓存：

Last-Modified：代表资源最后修改时间，存在服务端返回的响应头。
If-Modified-Since：存在客户端请求头，值为上次存储的Last-Modified，判断资源是否过期。
Etag： 代表资源的唯一标识，存在服务端返回的响应头，Etag优先级高于Last-Modified。
if-None-Match： 存在客户端请求头，值为上次存储的Etag，判断资源是否过期。