一、背景
最近公司业务需要开发了一个js sdk。sdk主要是通过http接口请求返回至前端进行渲染。因为js sdk有一定的大小会消耗过多的网络资源，所以采用浏览器缓存策略避免多次http请求造成网络资源浪费，降低网络延迟，减少网络负荷，提高性能。
二、浏览器缓存
根据浏览器缓存的位置可以分为4类
- Memory Cache
- Disk Cache
- Service Worker
- Push Cache
| 缓存类型 | 存储位置 | 优点 | 缺点 | 触发时机 |
|---|---|---|---|---|
| Memory Cache | 存储在运行内存中 | 读取速度快 | 不能持久化存储，浏览器tab页关闭之后就被释放 | 页面加载之后，刷新页面就会触发 |
| Disk Cache | 存储在本地磁盘中 | 能持久化存储，浏览器tab页关闭之后还存在 | 读取速度慢 | 浏览器关闭之后，再次打开页面 |
| Service Worker | 存储在本地磁盘中 | 自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性 | 读取速度慢 | 浏览器关闭之后，再次打开页面 |
| Push Cache（推送缓存） | 存储在会话（Session）中 | - | 会话结束就被释放 | Push Cache是针对HTTP/2标准下的推送资源设定的 ，是浏览器缓存的最后一道缓存机制，是在设置了Last-Modifed但没有设置Cache-Control或者Expires时触发 |
三、示例
- 配置nginx
#静态资源文件缓存 location ^~ /static/ { access_log off; add_header Cache-Control max-age=2592000; expires 30d; } - 访问
/static/observer.js
- Memory Cache
- Disk Cache
- Service Worker及Push Cache当前未涉及到后续补充