一、浏览器缓存资源的方式
1、memory cache
将资源缓存在内存中
特点：
- 读取高效
- 可持续性短，关闭tab页后就会失效
- 容量有限
2、disk cache
将资源存储在磁盘中
特点：
- 读取较慢
- 可持久化存储
- 容量较大
3、Push Cache
http2新增
- 缓存只能被使用一次
- 与服务器连接关闭，就会失效
- 可以缓存任意资源
二、强缓存与协商缓存
1、实现缓存的头字段
- Expires（老）：缓存过期时间，保存的是服务器时间，如果客户端修改了本地时间，会影响浏览器比较结果
- Cache-control（新）：设置缓存细节，包括时长、缓存方式等
- max-age：缓存有效时长，单位秒
- public：客户端和代理服务器都可以缓存
- private：只允许客户端缓存
- no-cache：协商缓存
- no-store：不缓存
- Last-Modified与If-Modified-Since（老）：第一次请求资源时，会通过Last-Modified返回文件最后更新时间，下次请求时，会通过If-Modified-Since带上更新时间，由服务端进行比较
- ETag与If-None-Match（新）:服务器第一次返回资源时，通过ETag返回资源的标记，当服务端资源变化了，这个标记会更新，下次访问请求通过If-None-Match带上这个标记，由服务端比较
2、强缓存
设置了强缓存，在缓存生效期间，请求会直接返回200，from disk或者memory，不会向服务器请求
通过Expires或者Cache-control设置，Cache-control优先级较高；两个方法效果一样，只是新老版本实现
3、协商缓存
设置了协商缓存，在客户端发起请求时，服务端会先校验客户端缓存是否有效，如果缓存有效，则返回304，客户端从缓存读取资源，否则服务端返回新的资源
通过Last-Modify或者ETag头字段实现：
- Last-Modify是通过资源更新时间比较，时间单位为秒，如果在客户端获取到资源的同一秒钟内，服务器资源发生了变更，这时是比较不出来资源已更新的，ETag解决了这个问题，每次资源变更，都会生成一个新的标记。
- Last-Modify性能较高，ETag精度较高
- ETag优先级高
4、默认的缓存方式
如果没有设置缓存策略，则浏览器会在收到文件时，根据响应头中的Date时间与Last-Modify差值的10%作为缓存时间，是强缓存
三、浏览器操作与缓存
- 地址栏输入：查找disk cache，如果没有则会发送请求
- F5刷新：优先取memory cache，没有则取disk cache，没有则发送请求
- Ctrl+F5：直接请求
