浏览器缓存

[fygethub]

缓存种类

浏览器自身的缓存严格意义上分为两种（严格意义上排除了cookie，storage，indexDb等）

1. memory cache

特指内存中的缓存、几乎所有的资源都能进入memory cache

• 内存大小有上限，后打开的tab达到上限会释放之前的tab缓存
• 作用范围为浏览器tab，关闭即释放
• 优先级高于disk cache

2. disk cache

特指硬盘中的缓存。是持久缓存，会存在实际的文件系统中（浏览器安装文件的cache目录中）

• 同样会有上线，浏览器自动清理
• 比memory cache 要慢
• 可跨回话访问同资源

其他

1. 代理服务器缓存，存在网络中的共享缓存，面向大量用户，通过cache-control来控制是否允许代理服务器缓存
2. CDN缓存，CDN分布网关的缓存，可以通过提供的接口刷新缓存
3. service worker，html5的离线缓存技术，存储于浏览器cache storage（优先级最高）

缓存的策略

我们会根据自身的需要，设置缓存的策略来达到用户访问的性能提升，分别是：

1、 强缓存

通过设置cache control的max-age=time(相对时间）来控制（优先级高于http1.0的expires的绝对时间）。
如果资源处于max-age的有效时间，会直接浏览器缓存
cache control还有其他几个主要属性可以组合使用：

• public 允许代理服务器和浏览器缓存
• private 仅允许浏览器缓存
• no-cache 绕过浏览器，直接请求服务器是否使用缓存（浏览器自身依然缓存）
• no-stroe l浏览器和服务器都不可以缓存

2、协商缓存

当请求的资源过了max-age的有效时间，就会进入协商缓存阶段。这个时候请求服务器并携带If-None-Match：Etag
（根据文件内容生成的文件唯一标示）进行比较，一样则返回304，不一样则返回新资源和200。（etag优先级高于http1.0
的last-modified最后修改时间）

3、启发式缓存

当既没有设置max-age相对时间，也没有设置exprires绝对时间的时候，浏览器依然会请求缓存的内容，不是请求服务器而是
走协商缓存策略： 它的计算方式为根据响应头中2个时间字段 Date 和 Last-Modified 之间的时间差值，取其值的10%作为缓存时间周期

用户的行为

当cache control不是设置为no-store的时候：
1.打开新窗口 如果命中了强缓存，则请求disk cache，否则请求
2.刷新 如果存在缓存，优先命中memory cache ，其次是disk cache，否则请求
3.强制刷新 都会请求最新服务器资源
4.地址栏输入 同刷新