前端性能优化--缓存

Cache-Control

Cache-Control：缓存控制

1. max-age
2. s-maxage
3. private
4. public
5. no-cache
6. no-store

max-age

1. 设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与Expires相反，时间是相对于请求的时间，
2. 优先级高于Expires

s-maxage

1. 覆盖max-age 或者 Expires 头，但是仅适用于共享缓存(比如各个代理)，并且私有缓存中它被忽略
2. 只能用于public,如CDN
3. 优先级高于max-age

]

private

1. 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）,可以缓存响应内容
2. 自己的服务器

public

1. 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。
2. CDN,可以被多个用户请求

no-cache

1. 在释放缓存副本之前，强制高速缓存将请求提交给原始服务器进行验证
2. 这个文件不管怎么样,都会向服务器发起请求,去服务器哪边询问,这个文件有没有在缓存策略里

no-store

1. 缓存不应存储有关客户端请求或服务器响应的任何内容。
2. 不会使用任何缓存策略

Expires

1. 缓存过期时间,用来指定资源的到期时间,是服务器端的具体的时间点
2. 告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而不用再次请求
3. max-age的优化级高于expires,当有max-age的时候,会无视expires
4. 当在有效时间内,如果服务器端的文件已经发生改变,但是浏览器端无法感知

Last-Modified/If-Modified-Since

Last-Modified 是一个响应首部，其中包含源头服务器认定的资源做出修改的日期及时间。 它通常被用作一个验证器来判断接收到的或者存储的资源是否彼此一致。由于精确度比 ETag 要低，所以这是一个备用机制。包含有 If-Modified-Since 或 If-Unmodified-Since 首部的条件请求会使用这个字段。

1. 基于客户端和服务端协商的缓存机制
2. Last-Modified ----response header
3. If-Modified-Since----request header
4. 需要与cache-control共同使用
5. max-age的优先级高于Last-Modified

缺点:

1. 某些服务端不能获取精确的修改时间
2. 文件修改时间改了,但文件内容却没有变

效果

1. 勾上disable cache
2. 第一次请求,状态码200,response header里有返回Last-Modified
3. 不勾disable cache
4. 刷新,状态码304,request header里有If-Modified-Since
5. 因为客户端发送过来的的Modified与服务端的Modified一样,所以使用缓存

Etag/If-None-Match

ETagHTTP响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，因为如果内容没有改变，Web服务器不需要发送完整的响应。而如果内容发生了变化，使用ETag有助于防止资源的同时更新相互覆盖（“空中碰撞”）

1. 文件内容的hash值
2. etag--response header
3. if-none-match -- request header
4. 要与cache-control共同使用

效果

1. 清掉缓存
2. 第一次请求，服务器返回etag
3. 可以使用缓存
4. 再次请求，客户端向服务器发送if-none-match
5. 因为2个值一样，所以返回304，让浏览器读取本地的资源

分级缓存策略

流程图