加快首屏渲染速度

利用浏览器缓存命中

随机时间戳结合localStorage实现可配置的有限时间文件缓存

由于公司项目需求，需要加快首屏渲染速度，发现首屏需要请求很多文件，这些文件的数据内容有可能被更新，但是没有请求到之前又不知道它有没有更新，所以每次都需要去请求最新的数据。

• 原先的处理方式 在每个文件请求url后缀带上timestamp为当前最新的时间戳的函数

• 初步尝试

最开始我是想通过axios配置一个缓存过期时间来实现，但是我搜了一下发现并没有这个配置项。

• 目前处理 时间戳结合localStorage 就是把时间戳缓存到localStorage中，比对缓存的时间戳减去当前的时间戳有没有超时，若超时则使用缓存的时间戳。可以自由支配缓存时长。

// 获取缓存的json时间戳
getCacheTimeStamp(cacheMinutes) {
  if (!cacheMinutes) { // 未设置则本地开发1分钟， 发布沙箱生产5分钟
    cacheMinutes = process.env.ENV === 'development' ? 1 : 5
  }
  const timeStamp = new Date().getTime()
  let cacheTimeStamp = Number(localStorage.getItem('cacheTimeStamp'))
  if (!cacheTimeStamp) {
    console.log('noCache')
    localStorage.setItem('cacheTimeStamp', timeStamp.toString())
  } else if ((timeStamp - cacheTimeStamp) / 60000 > cacheMinutes ) {
    console.log('cacheOverTime')
    // 缓存过期 是否需要加判断组件内容是否更改
    localStorage.setItem('cacheTimeStamp', timeStamp.toString())
  }
  cacheTimeStamp = Number(localStorage.getItem('cacheTimeStamp'))
  return cacheTimeStamp
}

• 这边有个注意点就是超时后最新的时间戳缓存到localStorage中后需要对cacheTimeStamp重新赋值，否则return出去的还会是上一次的缓存数据。

这是缓存前的渲染时间

这是缓存后的渲染时间

可以看到速度提升还是挺明显的。缓存命中之后会在status边上有个from disk cache的标识