缓存
目的：用于加快再次请求的加载速度。
如何缓存：通过请求头和相应头来设置。包括该资源是否会被缓存，会存多久。
强制缓存
通过两个字段( Cache-Control,Expires)来设置。请求头和响应头均为该字段名。表示在两个字段设置的时间限制内，缓存有效，直接取缓存，不发送请求。
- Cache-Control：max-age=3600;（单位为秒，表示超过3600秒，该缓存过期）。
值除max-age之外还有其他值：
- 若指令存在于响应头中，有以下值：
public: 客户端和代理服务器都可以缓存。因为一个请求可能要经过不同的代理服务器最后才到达目标服务器，那么结果就是不仅仅浏览器可以缓存数据，中间的任何代理节点都可以进行缓存。
private： 这种情况就是只有浏览器能缓存了，中间的代理服务器不能缓存。
no-cache: 跳过当前的强缓存，发送HTTP请求，即直接进入协商缓存阶段。
no-store：非常粗暴，不进行任何形式的缓存。
s-maxage：这和max-age长得比较像，但是区别在于s-maxage是针对代理服务器的缓存时间。
等等 - 若指令存在于请求头中，有以下值：
no-cache:强制向源服务器再次验证（即不走强缓存，直接走协商缓存）
no-store: 不缓存请求或响应的任何内容
max-age:响应的最大Age值
max-stale: 接受已过期的响应
min-fresh:客户端希望获取一个在小于指定的时间内被更新过的资源，单位为秒：例如：Cache-Control：min-fresh =120 。向服务器获取2分钟内被更新过的资源。
no-transform
only-if-cached:
cache-extension
- Expires(HTTP1.0版本): Thu, 25 May 2020 12:30:00 GMT;（值为时间格式）
缺陷：由于服务器的时间和浏览器的时间可能并不一致，那服务器返回的这个过期时间可能就是不准确的。
优先级： Cache-Control > Expires
协商缓存
通过两对字段来设置。
1.Last-Modified/If-Modified-Since
Last-Modified（响应）：这个资源在服务器上的最后修改时间
If-Modified-Since（请求）： 取取上次响应返回的Last-Modified值。用于服务器比较文件修改时间是否与该时间一致。若不一致（判断为true），表示更新过。返回最新的信息。否则，未更新，返回304。
缺陷：
- 如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源
- 因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成文件，那么会走缓存，不会返回最新的资源。
2.ETag/If-None-Match
ETag （响应）：服务器生成的唯一标识。更新就会变化。
If-None-Match（请求）：取上次响应返回的ETag值。用于服务器比较是否与服务器上的资源的ETag值一致；若不一致（判断为true），表示更新。返回最新的信息。否则，未更新，返回304。
缓存机制
原则：先走强制缓存，强制缓存失效，则走协商缓存
实际场景应用缓存策略
1.频繁变动的资源
Cache-Control: no-cache
使浏览器每次都请求服务器，然后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量，但是能显著减少响应数据大小。
2.不常变化的资源
Cache-Control: max-age=31536000
给它们的 Cache-Control 配置一个很大的 max-age=31536000 (一年)，浏览器执行强制缓存。而为了解决更新的问题，就需要在文件名(或者路径)中添加 hash， 版本号等动态字符，之后更改动态字符，从而达到更改引用 URL 的目的，让之前的强制缓存失效 (其实并未立即失效，只是不再使用了而已)。
在线提供的类库 (如 jquery-3.3.1.min.js, lodash.min.js 等) 均采用这个模式。
用户不同行为的操作方式会有不同的效果：
1.地址栏访问/新打开窗口/前进后退/，正常的浏览器缓存机制；
2.F5刷新，浏览器会设置max-age=0，跳过强缓存判断，进行协商缓存判断；
3.ctrl+F5刷新，跳过强缓存和协商缓存，直接从服务器拉取资源。
参考：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching
