缓存相关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打包的话，借助插件可以很方便的处理。
<script src="http://test.com/a.js?version=0.0.1"></script>
<script src="http://test.com/a.【hash值】.js"></script>
强缓存和协商缓存
强缓存是利用Expires和Cache-Control两个字段来控制的。
协商缓存是由服务器来确定缓存资源是否可用，主要通过Etag和If-None-Match、Last-Modified和If-Modified-Since这两组字段来控制。
网友评论