画布 1
缓存
  强缓存
    定义
    相关头部 Expires、Cache-Control
  协商缓存
    定义
    相关头部 俩组 Last-Modified、If-Modified-Since和 Etag、If-None-Match
    启发式算法
  浏览器刷新做了什么
    刷新(F5)
    重载
  缓存的位置
    Memory Cache
    Disk Cache
  缓存策略
浏览器的缓存策略主要分为俩类
强缓存
协商缓存
强缓存的优先级比协商缓存高。
可以直接使用，不需要向服务器验证是否失效的缓存
Expires:
Expires 是HTTP1.0的一个响应头，返回一个绝对时间，表示该资源在这个时间后过期。在这个时间到来之前，浏览器可以直接使用这个资源的缓存，而不需要和服务器通信。但是Expires会受本地时间的限制，如果修改了本地时间，可能会造成缓存失败。于是就有了HTTP1.1的Cache-Control。
Cache-Control:
Cache-Control 优先级比Expires高，可以设置max-age值，这是一个相对时间，单位是秒，表示资源在多少秒后失效，相对的是报文创建的时间。除了max-age以外，还可以设置其他的值：
s-maxage: 限定代理服务器上能够存多久
no-store: 不缓存资源
no-cache：缓存前必须先确认其有效性
public：表示代理服务器和客户端都可以缓存资源
private: 表示只有客户端可以缓存资源
是指需要向服务器验证是否失效的缓存
Last-Modified(响应头返回，一个Date) 和 If-Modified-Since(请求头，一个Date):
Last-Modified表示资源最后一次修改时间，在第一次相应的时候会跟着返回回来，然后在验证资源是否有效的时候，浏览器会发送If-Modified-Since请求头，他的值就是Lastt-Modified的值，服务器根据这个值判断是否有效。
但如果修改时间是一秒内的修改是识别不到的，导致服务器不会返回正常的资源。
Etag(响应头) 和 If-None-Match
Etag的用法和Last-Modified一样，但是Etag是通过哈希函数计算，类似文件指纹，只要文件修改了，Etag就会不一样，服务器根据Etag判断资源是否有效。优先级比Last-Modified高，同时出现时，优先使用Etag。
如果资源没有设置Expires和Cache-Control头部，该资源不能直接使用强缓存。但却有下图的情况
没有设置Cache-Control和Expires头部，但是有Last-Modified字段，浏览器会使用启发式算法，会取响应头中的Date字段减去Last-Modified的字段10%，作为缓存时间。
(Date - Last-Modified)/10
刷新的时候浏览器一般会把已缓存的资源拿去跟服务器验证。
通过在请求头中设置Cache-Control: max-age=0
Cache-Control是通用字段，同时出现在请求头和响应头里含义不同。
如果出现在请求头里值的解析如下：
max-age: 缓存无法返回缓存时间长于age的资源
no-cache: 除非资源进行了再验证，否则这个客户端不会接受已缓存的资源
Chrome的刷新策略有点不同：
一般情况下，浏览器刷新的时候会把已缓存的资源拿去跟服务端验证，包括HTML、样式、脚本。
但在一些内容不断变化的网站，用户频繁刷新，会造成很多不必要的请求，对此，Chrome的解决方法是只会验证HTML文件，如果HTML文件通过，那么其他资源直接使用强缓存。
重载的时候浏览器不使用缓存内容，而是向服务器拿取资源。
这是通过在请求头设置Cache-Control：no-cache和Pragma:no-cache（不发送协商缓存头）实现的。
缓存的资源一般会放在Memory Cache和Disk Cache中，Chrome控制台中会标明该缓存的来源。如果俩个位置都缓存了，会优先读取Memory Cache里的缓存
Memory Cache是放在内存里的缓存，当我们关闭Tab页后，渲染进程的内存就会被释放，缓存也不存在了
Disk Cache 是放在磁盘中的缓存，与Memory Cache相比，读取速度比较慢，但是存储资源的容量和时效性要比Memory Cache要好。
现在的缓存策略一般是HTML使用协商缓存，其他资源使用强缓存，强缓存设置一个比较长的时间，配合打包工具的文件指纹功能，当更新后，文件名会改变，浏览器会去请求更新后的文件，而不会使用缓存。