一、背景
最近公司业务需要开发了一个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当前未涉及到后续补充