浏览器缓存机制和设置

浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的。浏览器的缓存机制和设置在前端的使用中很重要。我们今天就对此好好的分析一下。

浏览器缓存分为两种，一种是强缓存，一种是协商缓存。

强缓存

先了解一下强缓存。

首先，浏览器会先构造一个http请求，这个请求会发送给浏览器缓存。

如果浏览器缓存有当前资源且未过期，直接返回。如果没有，重新发送到指定服务器获取资源。

打开控制台，刷新页面，会发现有大量的http请求返回200的。其size是disk cache或者是memory cache。这用的就是强缓存。

那么缓存规则是什么呢？

服务器的返回报文中，存在Expires和Cache-Control两个字段控制。

Expires

这个字段是http 1.0 的字段。其值是该缓存的到期时间。

示例：Expires: Wed, 21 Oct 2015 07:28:00 GMT

Cache-Control

这个字段是http 1.1 的字段， 如果同时和Expires存在，则按这个为准。

一般取以下几个值：

• public：表明响应可以被任何对象（包括：发送请求的客户端，代理服务器）缓存
• private：表明响应只能被单个用户缓存，代理服务器不能缓存它。
• no-cache：在发布缓存副本之前，强制要求缓存把请求提交给原始服务器进行验证。
• no-store：不缓存。

可以设置 max-age=<seconds>：缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。

协商缓存

在强缓存失效后，会执行协商缓存。

浏览器会携带标识符请求服务器。

服务器根据标识符决定是否使用缓存。

其中 Etag/If-None-Match 和 Last-Modified/If-Modified-Since 成对存在。

Etag是返回资源的一个哈希值，请求的时候会挂到If-None-Match属性上。服务器根据这个哈希值返回200还是304。

Last-Modified 和If-Modified-Since是http 1.0字段。

Last-Modified是返回的资源的最后修改时间。服务器根据此值和资源的修改时间比较，如果有修改，则返回200，否则返回304.

Etag/If-None-Match的优先级大于Last-Modified/if-Modified-Since

总结

浏览器缓存机制基本就这些了，应该可以很清晰了。