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

一、背景

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

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

缓存类型	存储位置	优点	缺点	触发时机
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;
  }

前端性能优化