一、背景

最近公司业务需要开发了一个js sdk。sdk主要是通过http接口请求返回至前端进行渲染。因为js sdk有一定的大小会消耗过多的网络资源，所以采用浏览器缓存策略避免多次http请求造成网络资源浪费，降低网络延迟，减少网络负荷，提高性能。

二、浏览器缓存

根据浏览器缓存的位置可以分为4类

  1. Memory Cache
  2. Disk Cache
  3. Service Worker
  4. 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
  1. Memory Cache
    前端性能优化之浏览器缓存
  2. Disk Cache
    前端性能优化之浏览器缓存
  3. Service Worker及Push Cache当前未涉及到后续补充
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。