HTTP 缓存

http 缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。

一、强缓存

当浏览器去请求某个文件的时候，服务端就在 respone header 里面对该文件做了缓存配置。

缓存的时间、缓存类型都由服务端控制，具体表现为：respone header 的 cache-control，常见的设置是 max-age public private no-cache no-store 等

强缓存两种策略 expires 和 cache-control

1. cache-control: max-age=xxxx，public

客户端和代理服务器都可以缓存该资源； 客户端在 xxx 秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statue code:200 ，如果用户做了刷新操作，就向服务器发起 http 请求

2. cache-control: max-age=xxxx，private

只让客户端可以缓存该资源；代理服务器不缓存 客户端在 xxx 秒内直接读取缓存,statue code:200

3. cache-control: max-age=xxxx，immutable

客户端在 xxx 秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statue code:200 ，即使用户做了刷新操作，也不向服务器发起 http 请求

4. cache-control: no-cache

跳过设置强缓存，但是不妨碍设置协商缓存；一般如果你做了强缓存，只有在强缓存失效了才走协商缓存的，设置了 no-cache 就不会走强缓存了，每次请求都回询问服务端。

5. cache-control: no-store

不缓存，这个会让客户端、服务器都不缓存，也就没有所谓的强缓存、协商缓存了。

二、对比缓存

通过比较去看是否需要缓存，会去和服务器进行一次通信，把本地缓存的状态发给服务器，让服务器去比较要不要重新拉取资源

对比缓存两种策略 eTag 和 Last-modify

eTag/if-none-match

• 服务器给这个资源生成一个唯一标识，放在 http-eTag 头里面
• 资源过期的时候，浏览器把 eTag 拿出来，向服务器发送一个请求，让服务器去确认 eTag 是否过期
• 如果过期就会把资源重新发送到浏览器，返回一个 200
• 如果没有过期，服务器就不会重新推送资源，返回一个 304 跳转（304 是本地跳转，从磁盘缓存上去拿 ）

last-modified/if-modified-since

• 服务器给这个资源生成一个时间戳，标示着资源的最后修改时间（实际上服务上面所有的资源都是有时间戳），客户端在请求数据的时候，先去本地缓存里面检查是否过期
• 如果资源过期，他会把时间戳放到请求头（cache-control）去发送请求，服务器收到请求后发现头有 if-modified-since,就会去和被请求资源的最后修改时间做对比，如果最后修改时间比较新就反回 200，否则 304

三、 缓存的优先级

1. last-modified/if-modified-since
2. eTag/if-none-match //对文件做精准的 md5,能响应文件非常细致的
3. expires // 不能响应毫秒级别
4. cache-control //过期时间长度

强缓存和对比缓存的使用场景

强缓存:

• 由于 css 和 js 在打包时加了 md5 值，建议直接使用，
• 并且 expires 和 cache-control 同时使用，建议设置时长为 7 天较为妥当

对比缓存:

• 图片文件由于没有加 md5 值，建议采用对比缓存，
• html 文件也建议采用对比缓

四、 Chrome Network

只有当前的派生资源才进行缓存，但是派生资源放到缓存中是不大对的
只有内存中放不下了才会放到硬盘中

共同点：都不请求资源

• memory //内存，放在内存是比较快，浏览器关掉下次就没有了
• disk //硬盘，浏览器关掉下次还会有

缓存的地方会跟电脑的环境有关系（电脑内存）