定义:利用浏览器存储机制,将一部分数据保存在客户端,从而减少对服务器的请求降低服务器的压力,提升效率。
为什么需要http缓存:
- 为了减少网络请求的数量和体积,让页面加载更加方便
- 当网络不稳定时,仍可以使用缓存的资源进行展示
浏览器缓存的都是派生资源
开源浏览器引擎的资源可以分为:
-
主资源,比如HTML页面,或者下载项
-
派生资源,分类如下
Javascript脚本 CSS样式 图片 字体 ... 可以说除了主资源之外,剩下的网络资源都是派生资源
强缓存
强缓存通过响应头catch-control中的max-age等指令进行控制,max-age可设置强缓存时间周期,在该周期内将直接从客户端缓存获取资源,不会向服务器发送请求
协商缓存
协商缓存通过响应头etag和last-modified进行控制,每次发送请求时,需要进行缓存新鲜度校验。如果缓存过旧,将直接从服务端获取,否则从客户端缓存中获取。
新鲜度校验,通过请求头if-none-match与响应头etag进行对比,或者请求头if-modified-since与响应头last-modified进行对比。
静态资源
第一次请求肯定是从服务器请求过来的资源。
如果第一次的响应头中包含可强缓存的相关字段 cache-control ,同时也包含了协商缓存的相关字段 etag 和 last-modified;
当强缓存和协商缓存字段同时存在时会进行以下步骤来请求资源:
强缓存和协商缓存同时存在,如果强缓存还在有效期内则直接使用缓存;如果强缓存不在有效期,协商缓存生效。
即:强缓存优先级 > 协商缓存优先级
强缓存的 expires 和 cache-control 同时存在时, cache-control 会覆盖 expires 的效果, expires 无论有没有过期,都无效。
即:cache-control 优先级 > expires 优先级
协商缓存的 Etag 和 Last-Modified 同时存在时, Etag 会覆盖 Last-Modified的效果。
即:ETag 优先级 > Last-Modified 优先级
第二次请求该资源的时候,就直接是从缓存中读取的。
实际场景中应用缓存的策略
我们对于变动更改频繁的文件,采取协议缓存的处理设置 Cache-Control: no-cache,通过Etag的值来判断当前缓存是否可用
对于基本不常变化的资源,采用强制缓存的处理,设置Cache-Control: max-age=xxx一个比较大的数,让其从客户端缓存中获取
部分来自:https://zhuanlan.zhihu.com/p/258963061