HTTP 缓存机制

为了提高浏览器 HTTP 请求的性能，在 HTTP 协议中有几种缓存机制来保证网络访问的性能。HTTP 协议中提供了如下几种缓存：Cache-Control、Expires、Last-modified 和 ETag，很好的利用它们可以提高我们网站的速度。

Expires

Expires 类似于 Cache-Control 中的 max-age，它告诉浏览器在这个时间（例如：Last-Modified:Sat, 25 Jun 2016 02:26:30 GMT）内直接从本地读取资源，不必再次向服务器请求。

Cache-Control

它用于定义资源的缓存策略，可以设置以下值：

• no-store：绝对禁止缓存，每次请求支援都要从服务器端获取；

• no-cache：

• publice：允许代理服务器缓存资源；

• private：不允许代理服务器缓存资源；

• max-age：设置缓存的最大有效时间（单位：秒），当发送请求的时间在有效期范围内，它不会向服务器发送请求，直接从本地获取资源。当它与 Expries 缓存同时使用时，Expries 失效；

• s-maxage：类似于 max-age，只适用于 publice` 缓存，一般用在 CDN 服务器上；

当 Expires 和 max-age 同时存在时，Expires 将被忽略。

Last-modified

Last-modified 是服务器端返回给浏览器资源的最后修改时间。如果同样一个资源的最后修改时间有变动，服务器会返回给浏览器 200 告诉浏览器需要重新向服务器请求新资源；如果没有变动，服务器会返回浏览器 304 告诉浏览器资源没有变动，直接从本地读取。

ETag

ETag 是为了解决 Last-modified 的一些缺陷：

• 一些资源的最后修改时间变了，但是内容没有改变；

• Last-modified 只能精确到秒级；

这样我们引入了 ETag，服务端会通过资源文件生成一段 Hash 字符串来标示这个资源，在 HTTP 的头部会将此标示返回给浏览器端，同时浏览器每次请求会将 ETag 发送给服务器端，此刻服务器端会比较请求和和即将返回的资源的 ETag，如果不一样，服务器会返回给浏览器 200 告诉浏览器需要重新向服务器请求新资源；如果一样，服务器会返回浏览器 304 告诉浏览器资源没有变动，直接从本地读取。

当 Etag 和 Last-modified 同时存在时，Last-modified 会忽略。

它们的区别

为什么有这么多缓存呢，其实它们是存在区别的：Expires 以及 Cache-Control 两种缓存在有效期内，它们是不会向服务器端发送任何请求的，直接获取本地资源；然而 Last-modified 和 ETag 还是需要请求服务器，服务器比较完后高速浏览器是否需要从本地获取。

这几种缓存需要搭配使用，如果客户端的有效期失效后，再次访问服务器端让服务器端比较一下资源内容是否改变，如果改变了这样服务器端才返回最新资源。

对于不同的资源的缓存策略

不同类型的资源会采用不同的缓存策略，通常 html 文件经常会采用 Cache-Control:no-cache，css 和 js 文件通常会采用 Cache-Control:max-age。