1. 浏览器缓存是指浏览器与服务器通信时存储在用户计算机上的数据。
2. 按缓存机制分为强缓存和协商缓存：
2.1 强缓存：
有效期内直接读取浏览器缓存, 200, from disk cache
// http1.0
Expires: Sat, 09 Jun 2020 08:13:56 GMT
// http1.1, 更高优先级
Cache-Control: max-age=31536000
2.2 协商缓存：
浏览器先向服务器询问浏览器缓存是否可用，根据服务器的返回内容判断读取浏览器缓存或重新请求服务器
// http1.0
Last-Modified: Wed, 21 Oct 2019 07:28:00 GMT // 服务器返回给浏览器, 浏览器存起来，再次请求时用
If-Modified-Since: Wed, 21 Oct 2019 07:28:00 GMT // 浏览器发送给服务器的请求
// http1.1, 更高优先级
Etag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Cache-Control, http1.1加入的属性
- no-cache: 服务器设置 no-cache, 表示让浏览器缓存, 但下次使用时先找服务器确认, 服务器返回 304(用缓存) 或 200(重发)。浏览器请求时设置 no-cache, 表示要服务器重发, 不使用缓存
- max-age: 以秒为单位设置缓存过期时间, 服务器设置 max-age=0, 表示让浏览器缓存, 但下次使用时先找服务器确认, 服务器返回 304(用缓存) 或 200(重发)。浏览器请求时设置 max-age=0, 表示先询问服务器, 根据服务器返回 304(用缓存) 或 200(重发)
- no-store: 禁止浏览器缓存
3. 按存储位置分为 memory cache, disk cache, Service Worker:
3.1 memory cache:
几乎所有网络请求资源都会被浏览器自动加入到 memory cache 中，Tab 关掉后该次 memory cache 失效，如果 memory cache 太多，则前面的逐渐失效。memory cache 读取缓存时会忽略 max-age=0、no-cache 等头部配置，不会忽略 no-store
3.2 disk cache:
disk cache 严格根据 http 头部配置判定是否缓存、缓存是否可用、是否重新请求。达到存储上限后会逐渐自动删除最可能过时的缓存。
3.3 Service Worker:
优先级最高，浏览器支持程度最低，可以从工具台手动操作。这个缓存是永久性的，调用 cache.delete(resource) 或容量超过限制，会被浏览器全部清除。
4. 刷新浏览器操作：
4.1 普通刷新(F5):
浏览器从缓存中读取资源，
- 先尝试命中 memory cache, 若命中则直接读取；
- 再尝试命中强缓存，若强缓存未过期则直接使用(200, from disk cache)，若过期，则去服务器验证资源是否有变化，若资源无变化则继续用(304), 若有变化则重发(200)；
- 再尝试命中协商缓存，根据已缓存的资源头部配置读取。
4.2 强制刷新(Ctrl + F5):
浏览器不使用缓存，浏览器发送的请求头包含 Cache-Control: no-cache, 服务器直接返回 200 和最新内容。
参考:
