浏览器缓存

强缓存

当服务器返回 HTTP 响应头给浏览器时，浏览器是通过响应头中的 Cache-Control 字段来设置是否缓存该资源。

内存缓存(from memory cache)和硬盘缓存(from disk cache)，如下:

（1）内存缓存(from memory cache)：内存缓存具有两个特点，分别是快速读取和时效性：

1、快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。

2、时效性：一旦该进程关闭，则该进程的内存则会清空。例如我们关闭 Tab 页面，内存中的缓存也就被释放了。

（2）硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。这段话存疑，具体问题具体分析

协商缓存

强缓存失效会带着缓存标志给服务器发请求，如果缓存还能用就是304
Etag / If-None-Match

Chrome浏览器策略：什么时候是from memory cache 什么时候是from disk cache 呢

即哪些资源会放在内存当中，哪些资源浏览器会放在磁盘上呢，结果如下下表所示

统计表
状态 类型 说明
200 form memory cache 不请求网络资源，资源在内存当中
200 form disk ceche 不请求网络资源，在磁盘当中
200 资源大小数值 从服务器下载最新资源
304 报文大小 请求服务端发现资源没有更新，使用本地资源

memory cache 是浏览器为了加快读取缓存速度而进行的自身的优化行为，不受开发者控制，也不受 HTTP 协议头的约束，算是一个黑盒。Service Worker 是由开发者编写的额外的脚本，且缓存位置独立，出现也较晚，使用还不算太广泛。所以我们平时最为熟悉的其实是 disk cache，也叫 HTTP cache (因为不像 memory cache，它遵守 HTTP 协议头中的字段)。平时所说的强制缓存，对比缓存(也叫协商缓存)，以及 Cache-Control 等，也都归于此类。

cache control 和etag的关系

缓存开关是： pragma， cache-control。
缓存校验有：Expires，Last-Modified，etag。

注意到一些http response不包含cache control只包含etag，对于此现象的回答是：
Caching is usually enabled by default in browers, so cache-control can be used to either customise this behaviour or disable it.
https://stackoverflow.com/questions/14496694/whats-default-value-of-cache-control

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching
https://segmentfault.com/a/1190000039820397
https://www.cnblogs.com/chengxs/p/10396066.html