强缓存
当服务器返回 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