前端性能优化：缓存

httpheader

Cache-Control

可出现在request header和response header中，其作用是 让浏览器和客户端相互知道各自的缓存策略情况

• max-age 缓存的最大有效时间，浏览器再次请求该资源时不会向服务端发起请求
• s-maxage 同上，但只能指定public缓存
• private
• public
• no-cache 发请求到服务端判断浏览器缓存是否过期
• no-store 完全不使用缓存策略

Expires

Cache-Control优先级比Expires更高

缓存过期时间，用来指定资源到期的时间，是服务端的具体的时间点

告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，则无需再次请求

Last-Modified/If-Modified-Since

基于客户端和服务端协商的缓存机制

last-modified - response header if-modified-since - request header 需要与cache-control一起使用

缺点：

• 某些服务端不能获取精确的修改时间
• 文件修改时间改了，但文件内容没有变

Etag/If-None-Match

• 文件内容的hash值
• Etag - response header
• if-none-match - request header
• 需要与cache-control 共同使用

分级缓存策略

200 状态

当浏览器本地没有缓存或者下一层失效时，可通过ctrl+f5 浏览器去服务器下载最新数据

304 状态

这一层由 last-modified/etag控制，当下一层失效时或用户点击refresh f5，浏览器发送请求给服务器，若服务端没变化则返回304给浏览器

200状态 (from cache)

这一层由 expires/cache-control 控制

1. expires(http 1.0)是绝对时间
2. cache-control(http 1.1)相对时间，两者都存在，cache-control覆盖expire，只要没失效，浏览器只访问自己的缓存