浏览器缓存机制

引言：

前端开发中，缓存有利于加快网页的加载速度，同时缓存能够被反复利用，所以可以减少流量和带宽的开销。

缓存的分类有很多种，分为：CDN缓存、数据库缓存、代理服务器缓存、浏览器缓存

本文主要介绍浏览器缓存：浏览器的缓存问题，主要指的是http的缓存，即协议层；协议层的缓存，其实，可以被分成强制缓存和对比缓存。

1、强制缓存

只有当缓存失效时，才会去服务器获取最新资源的方式，就是强制缓存；

在协议层的字段中，可以造成强制缓存的字段有两个:Expires、Cache-Control

1.1、Expires

该字段表示缓存到期时间，即有效时间+当时服务器的时间，然后将这个时间设置在header中返回给服务器。因此，该时间是一个绝对时间，举例说明：

Expires: Thu, 10 Nov 2017 08:45:11 GMT

在响应消息头中，设置这个字段之后，就可以告诉浏览器，在未过期之前不需要再次请求。

但是，这个字段设置时有缺点：

由于是绝对时间，用户可能会将客户端本地的时间进行修改，而导致浏览器判断缓存失效，重新请求该资源，同时，还导致客户端与服务端的时间不一致，致使缓存失效。

1.2、Cache-Control

在HTTP/1.1中，增加了一个字段Cache-Control，该字段表示资源缓存的最大有效时间，在该时间内，客户端不需要向服务器发送请求

这两者的区别就是前者是绝对时间，而后者是相对时间。我们不妨举个例子来说明一下：

Cache-Control: max-age=2592000

下面列举一下Cache-Control的字段可以带的值：

①、max-age：即最大有效时间，在上面的例子中我们可以看到

②、no-cache：表示没有缓存，即告诉浏览器该资源并没有设置缓存

③、s-maxage：同max-age，但是仅用于共享缓存，如CDN缓存

④、public：多用户共享缓存，默认设置

⑤、private：不能够多用户共享，HTTP认证之后，字段会自动转换成private。

2、对比缓存

对比缓存的过程是，先从缓存中获取对应的数据标识，然后向服务器发送请求，确认数据是否更新，如果更新，则返回新数据和新缓存；反之，则返回304状态码，告知客户端缓存未更新，可继续使用。

这正好弥补了一些强制缓存的缺陷。对比缓存主要应用于一些时常需要动态更新的资源文件。

对比缓存在协议里的字段是Last-Modified和If-Modified-Since。

2.1、Last-Modified

Last-Modified：服务器告知客户端，资源最后一次被修改的时间，例如

Last-Modified: Thu, 10 Nov 2015 08:45:11 GMT

2.2、If-Modified-Since

If-Modified-Since：再次请求时，请求头中带有该字段，服务器会将If-Modified-Since的值与Last-Modified字段进行对比，如果相等，则表示未修改，响应304； 反之，则表示修改了，响应200状态码，返回数据；这个字段可以和Cache-Control配合使用

3、浏览器行为引起的不同

①、刷新网页 => 如果缓存没有失效，浏览器会直接使用缓存；反之，则向服务器请求数据

②、手动刷新（F5） => 浏览器会认为缓存失效，在请求服务器时加上Cache-Control: max-age=0字段，然后询问服务器数据是否更新。

③、强制刷新（Ctrl + F5） => 浏览器会直接忽略缓存，在请求服务器时加上Cache-Control: no-cache字段，然后重新向服务器拉取文件。

4、移动端的缓存处理

一次完美的缓存必须保证两点：

①、数据缓存之后，尽量减少服务器的请求

②、如果资源更新的话，必须使得客户端的资源一起更新。

所以，一般我们会运用的方式是：

在资源文件后面加上表示，如config.f1ec3.js、config.v1.js之类的，然后给资源设置较长的缓存时间，如一年；

Cache-Control: max-age=31536000

这样子，就不会造成304的回包现象。

然后一旦资源发生更新时，我们可以改变资源后面的标识符，实现静态资源非覆盖式更新。