http缓存机制及原理

无缓存，原始模型

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

缺点：

• 浪费用户流量。
• 浪费服务器资源，服务器每次都要读磁盘文件，然后发送文件到浏览器。
• 浏览器要等待 a.js 下载并且执行后才能渲染页面，花费的时间会影响用户体验。

有缓存，无更新

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

缺点：

• 如果服务器上a.jpg的文件内容变了，浏览器每次都从缓存读取无法获取最新文件

有缓存，Expires 更新机制

浏览器和服务器约定文件过期时间，浏览器第一次请求 a.jpg 时服务器会发送完整的文件，但是服务器在发送文件的时候还附带发送一些额外信息——过期时间，用 Expires 字段来控制，时间是 GMT 格式的标准时间，如 Expires: Fri, 01 Jan 2021 00:00:00 GMT 。

• 浏览器第一次请求一个静态资源 a.js。（1KB）
• 服务器把 a.js 和 a.js 的缓存过期时间(Expires：Mon, 26 Sep 2018 05:00:00 GMT)发给浏览器。（10+1=11KB）
• 浏览器接收到 a.js，同时记住了过期时间。
• 在2018年9月26日5点之前，浏览器再次请求 a.js，便不再请求服务器，直接使用上一次缓存的 a.js 文件。（0KB）
• 在2018年9月26日5点01分，浏览器请求 a.js，发现 a.js 缓存时间过了，于是不再使用本地缓存，而是请求服务器，服务器又重新读取磁盘文件 a.js，返给浏览器，同时告诉浏览器一个新的过期时间。（1+10+1=12KB）。
• 如此循环。。。

优点：

• 在过期时间以内，节省了用户流量。
• 减少了服务器重复读取磁盘文件的压力。
• 缓存过期后，能够得到更新的 a.js 文件

缺点：

• 控制功能较为单一。缓存过期以后，服务器不管 a.js有没有变化，都会再次读取 a.js文件，并返给浏览器。

有缓存，Expires + Last-Modified 更新机制

为了解决上个方案的问题，服务器和浏览器协商，制定了一种方案，服务器每次返回 a.js 的时候，还要告诉浏览器 a.js 在服务器上的最近修改时间 Last-Modified （GMT标准格式）。

• 浏览器请求 a.js 文件。（1KB）
• 服务器返回 a.js 文件（10+1=11KB），并带上 a.js 文件上次被修改时间 Last-Modified（GMT标准格式）以及缓存过期时间 Expires（GMT标准格式）
• 当 a.js 过期时，浏览器带上 If-Modified-Since（等于上一次请求返回的 Last-Modified ） 请求服务器。（1KB）
• 服务器比较请求头里的 Last-Modified 时间和服务器上 a.js 文件上次被修改的时间：
  • 如果一致，则告诉浏览器：你可以继续用本地缓存（304）。此时，服务器不再返回 a.js 文件。（1KB）
  • 如果不一致，服务器读取磁盘上的 a.js 文件返给浏览器，同时告诉浏览器 a.js 的最近的修改时间 Last-Modified 以及重设过期时间 Expires。（1+10=11KB）
  • 如此循环。。。

优点：

• 缓存过期后，就算再次请求，服务器如果发现文件没变化，不会把 a.js 发给浏览器，而是告诉浏览器继续使用本地缓存。

缺点：

• Expires 过期控制不稳定，因为浏览器端可以随意修改时间，导致缓存使用不精准。
  Last-Modified 过期时间只能精确到秒。

添加 Cache-Contorl 相对时间控制

为了兼容已经实现了上述方案的浏览器，同时加入新的缓存方案，服务器除了告诉浏览器 Expires ，同时告诉浏览器一个相对时间 Cache-Control：max-age=10秒。意思是在10秒以内，使用缓存到浏览器的 a.js 资源。
浏览器先检查 Cache-Control，如果有，则以 Cache-Control 为准，忽略 Expires。如果没有 Cache-Control，则以 Expires 为准。可以看出 Cache-Control 对缓存的控制粒度更细。具体参看Cache-Control MDN

添加 Etag 文件内容对比

为了解决文件修改时间只能精确到秒带来的问题，我们给服务器引入 Etag 响应头。也就是说 a.js 内容变了，Etag 才变。内容不变，Etag 不变，可以理解为 Etag 是文件内容的唯一 ID。
同时引入对应的请求头 If-None-Match，每次浏览器请求服务器的时候，都带上If-None-Match字段，该字段的值就是上次请求 a.js 时，服务器返回给浏览器的 Etag。

• 浏览器请求 a.js。
• 服务器返回 a.js，同时告诉浏览器过期绝对时间（Expires）以及相对时间（Cache-Control：max-age=10），以及a.js上次修改时间Last-Modified，以及 a.js 的Etag。
• 10秒内浏览器再次请求 a.js，不再请求服务器，直接使用本地缓存。
• 11秒时，浏览器再次请求 a.js，请求服务器，带上上次修改时间 If-Modified-Since 和上次的 Etag 值 If-None-Match。
• 服务器收到浏览器的If-Modified-Since和If-None-Match，发现有If-None-Match，则比较 If-None-Match 和 服务器 a.js 文件计算后的 Etag 值，忽略If-Modified-Since的比较。
  a.js 文件内容没变化，则Etag和If-None-Match 一致，服务器告诉浏览器继续使用本地缓存（304）。
• 如此循环。。。

不缓存 index.html 的原因

http 缓存机制存在一个问题——浏览器无法主动得知服务器上的 a.js 资源变化。

不管用 Expires 还是 Cache-Control，他们都只能够控制缓存是否过期，但是在缓存过期之前，浏览器是无法得知服务器上的资源是否变化的。只有当缓存过期后，浏览器才会请求服务器。

想象一些我们浏览网页的场景，我们一般都是输入网址，访问一个 html 文件，html文件中会引入 js、css 、图片等资源。

我们不让 html 文件缓存，那么每次访问浏览器都会请求服务器，所以浏览器每次都能拿到最新的 html 资源。资源更新的时候，比如 a.js 文件产生变动，我们只需更改 a.js 文件资源的版本号：

<script src="http://test.com/a.js?version=0.0.1"></script>

或者在文件末尾添加 hash 值：

<script src="http://test.com/jQuery-edb203c114.10.2.js"></script>

这样，通过设置 html 不缓存，html 引用资源内容变化则改变资源路径的方式，就解决了无法及时得知资源更新的问题。使用webpack打包的话，借助插件可以很容易处理。

与 http 缓存相关的头信息

Expires

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

如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被忽略。

Cache-Control

请求/响应头，通用消息头字段，被用于在http请求和响应中，通过指定指令来实现缓存机制。

缓存指令是单向的，这意味着在请求中设置的指令，不一定被包含在响应中。

If-Modified-Since / Last-Modified

请求头/响应头，资源最近修改时间，分别用于浏览器和服务器。

Etag

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

If-None-Match

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