浏览器缓存分两种:强制缓存、协商缓存。
为什么需要缓存?
- 通过缓存,减少网络请求的数量和体积,页面加载和渲染更快;
- 网络请求不稳定,加剧页面渲染不稳定性,所以通过缓存,保证页面优先加载;
- 总结下来就是,使用缓存,可以让页面的加载、渲染更快,提高用户体验度。
有哪些资源可以被缓存?
一般为静态资源,如 css、js、img 等。
强制缓存
强制缓存流程
- 初次请求,服务器返回资源,和 Cache-Control
若服务器认为该资源可以被缓存,在响应头(Response header)加上 Cache-Control; - 再次请求,浏览器通过 Cache-Control 判断所请求的资源是否有效,命中则直接从强制缓存中返回请求响应,无需跟服务器进行任何交互,直接从本地缓存获得资源。
Cache-Control 字段属性
-
no-cache
不去判断强制缓存是否过期,而是强制进行协商缓存,直接向服务器发请求来验证缓存是否有效,若缓存未过期,使用本地缓存。 -
no-store
表示禁止使用任何缓存。不用本地缓存,也不用任何服务器缓存策略,而是每次发请求需要服务器给予全新的响应。 -
max-age 缓存最大过期时间(秒级)
-
private只允许最终用户做缓存(响应中使用)
-
public允许中间路由、代理做缓存(响应中使用)
Expires 也是控制缓存,已被 cache-control 代替。
协商缓存
- 属于服务端缓存策略
- 服务端判断客户端资源,是否和服务端一样
- 一致返回304,否则返回200和最新资源
协商缓存过程
- 初次请求,返回资源和资源标识(ETag / Last-Modified);
- 再次请求,请求头(Request header)带着资源标识(If-None-Match / If-Modified-Since),服务器判断资源最后修改时间和资源标识携带的值是否相同,来决定本地缓存资源是否最新,一致返回304,否则返回新资源和新的资源标识。
资源标识
- ETag 资源的唯一标识,通过hash内容变化判断 —— If-None-Match
- Last-Modified 通过资源最后修改时间判断 —— If-Modified-Since
请求头和响应头中的值一一对应,并且,再次请求时携带的资源标识的值即为上次响应头返回的值。
ETag 和 Last-Modified 优先级比较
- 优先使用ETag
- Last-Modified 只能精确到秒级,未超过 1s 的改变不会返回
- 如果资源被重复生成,ETag可以更精准判断
为什么 ETag 更精准?
如果某个文件每隔一段时间重复生成,但内容相同,ETag hash值不变,所以资源不会返回,Last-Modified 还是会把他当作最新资源返回。ETag 可以判断文件内容是否相同,所以ETag 更精准。