前端性能优化之浏览器缓存

一、背景

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