http缓存

缓存相关header

• Expires

响应头，代表资源的过期时间

• Cache-Control

请求/响应头，缓存控制字段，精确控制缓存策略

• If-modified-Since

请求头，资源最近修改时间，由浏览器告诉服务器

• Last-Modified

响应头，资源最近修改时间，由服务器告诉浏览器

• Etag

响应头，资源标识，由服务器告诉浏览器

• If-None-Match

请求头，缓存资源标识，由浏览器告诉服务器

配对使用的字段

• If-modified-Since和Last-Modified
• Etag和If-None-Match

从实际场景出发，一点点完善缓存机制，来理解各个字段的意义

做一些约定，方便以后比较。

• a.js 大小为10KB
• 请求头约定为1KB
• 响应头约定为1KB

原始模型

• 浏览器请求静态资源a.js（请求头1KB）
• 服务器读取磁盘文件，返回给浏览器。（文件+响应头 11KB）
• 浏览器再次请求，服务器又重新读取文件，返回给浏览器

消耗的流量与访问次数正相关

浏览增加缓存机制

• 浏览器第一次请求a.js，缓存a.js到本地磁盘 （1+10+1= 12KB）
• 浏览器再次请求a.js，直接走浏览器缓存，不再向服务器发起请求 （0KB）

流量与访问次数无关，只有第一次请求会消耗浏览
缺点：服务器a.js更新后，浏览器也拿不到最新的资源

服务器和浏览器约定资源过期时间 Expires

• 浏览器第一次请求静态资源a.js（1KB）
• 服务器把文件和文件缓存过期时间发给浏览器
• 浏览器收到文件，记住了过期时间
• 在过期时间之前，浏览器再次请求a.js，会直接使用上一次缓存的文件
• 在过期时间之后，再次请求，会去请求服务器，服务器重新读取文件返回给浏览器，同时告知浏览器新的过期时间。

缺点：缓存过期之后，服务器不管a.js有无变化，都会再次读取a.js返回给浏览器

服务器告诉浏览器资源上次修改时间

• 浏览器访问a.js
• 服务器返回a.js时，告诉浏览器a.js的上次修改时间Last-Modified及缓存过期时间Expires
• 当过期时间之后请求a.js，会带上 If-Modified-Since（等于上一次请求的Last-Modified）
• 服务器比较请求头里的If-Modified-Since和文件的上次修改时间
  • 如果一致，则告知浏览器可以继续使用本地缓存(304)
  • 如果不一致，则读取文件返回给浏览器，并带上新的 Last-Modified及缓存过期时间Expires

缺点：Expires 过期控制不稳定；Last-Modified 过期时间只能精确到秒(一秒内文件变化频繁，获取不到最新的文件；可能存在文件未变化，但修改时间更新了的情况)。

增加相对时间的控制Cache-Contorl

为了兼容已有缓存方案，同时加入新的缓存方案。除了告诉浏览器Expires，还告诉一个相对时间 Cache-Control：max-age=10秒，含义是10秒内使用缓存到浏览器的a.js。
浏览器先检查Cache-Control，如果有，则以Cache-Control为准，忽略Expires。如果没有Cache-Control则以Expires为准。

Cache-Control的常用设置值：

• no-cache:不使用本地缓存，使用协商缓存
• no-store:直接禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送请求，服务器都重新下载资源
• public：可以被所有用户缓存，包括终端用户和CDN等中间代理服务器
• private：只能被终端用户的浏览器缓存，不允许中继缓存服务器对其缓存

增加文件内容对比，ETag 和 If-None-Match

a.js 内容变了，Etag 才变。内容不变，Etag 不变，可以理解为 Etag 是文件内容的唯一 ID。

每次浏览器请求服务器的时候，都带上If-None-Match字段，该字段的值就是上次请求 a.js 时，服务器返回给浏览器的 Etag。

• 浏览器请求a.js.
• 服务器返回a.js，同时告诉浏览器过期绝对时间Expires和相对时间Cache-Control：max-age=10），文件上次修改时间Last-Modified以及文件Etag。
• 10秒内，浏览器再次请求，直接用本地缓存。
• 10秒后，浏览器再次请求，带上上次修改时间 If-Modified-Since和If-None-Match。
• 服务器收到请求，发现有If-Modified-Since和If-None-Match。存在If-None-Match，则忽略If-Modified-Since。如果If-None-Match的值跟文件的Etag值相同，则告诉浏览器继续使用本地缓存，否则返回新的文件及其他字段信息。

还存在的问题

无论是Expires还是Cache-Control，在缓存过期之前，浏览器都不会发请求询问服务器，如果在这期间，服务器里的文件发生了变化，浏览器是感知不到的。

可以想象一下我们使用a.js的场景，一般都是输入网址，访问一个html文件，html文件里引入js、css、图片等资源。
所以我们可以设置让html文件不缓存，每次都拿到最新的html。然后如果js文件内容有更新时，更新引用js的地方，可以通过版本号来区分，也可以通过hash值区分。使用webpack打包的话，借助插件可以很方便的处理。

强缓存和协商缓存
强缓存是利用Expires和Cache-Control两个字段来控制的。
协商缓存是由服务器来确定缓存资源是否可用，主要通过Etag和If-None-Match、Last-Modified和If-Modified-Since这两组字段来控制。

参考：
面试精选之http缓存
HTTP强缓存和协商缓存
前端缓存最佳实践