关于javascript:前端持久化缓存优化

缓存是晋升 web 应用程序无效办法之一，尤其是用户受限于网速的状况下。晋升零碎的响应能力，升高网络的耗费。当然，内容越靠近于用户，则缓存的速度就会越快，缓存的有效性则会越高。

之前集体写过 前端 api 申请缓存计划。介绍的了内存中的缓存以及过期逻辑。后续也写过 手写一个前端存储工具库，该工具利用了适配器解决了不同的存储介质（内存，IndexedDB, localStorage 等）。

不过，在某些特定场景下缓存还须要优化，例如：用户须要在登录或者填写表单时须要通过某些接口获取必要数据，而这些接口是由第三方平台提供的。这些接口可能会呈现谬误或超时的状况。如果以后数据有很强实时性，开发者就必须重试或者分割第三方平台来解决对应的谬误。如果数据的实时性不强，以后就能够应用本地缓存。

一般来说，当获取时效性缓存时候，咱们会查看并删除以后数据。代码简写如下所示：

// 缓存对应的的模块以及性能
const EXTRA_INFO_CACHE_KEY = 'xxx.xxx.xxx';
// 缓存时长为 7 天
const CACHE_TIME =  7 * 24 * 60 * 60 * 1000;

const getCachedExtraInfo = () => {const cacheStr = localStorage.getItem(`${EXTRA_INFO_CACHE_KEY}.${userId}`);

  if (!cacheStr) {return null;}

  let cache = null;
  try {cache = JSON.parse(cacheStr);
  } catch () {return null;}

  if (!cache) {return null;}

  // 缓存过期了，间接返回 null
  if ((cache.expiredTime ?? 0) < new Date().getTime()) {return null;}

  return cache.data;
}

const getExtraInfo = () => {const cacheData = getCachedExtraInfo();
  if (cacheData) {return Promise.resolve(cacheData);
  }

  return getExtraInfoApi().then(res => {localStorage.setItem(`${EXTRA_INFO_CACHE_KEY}.${userId}`, {
      data: res,
      expiredTime: (new Data()).getTime() + CACHE_TIME,});
    return res;
  });
}

如果这时候接口呈现了拜访谬误问题，很多数据到期的用户就无奈失常应用性能了，这时候增加重试性能可能会解决某些谬误。这时候咱们先不思考重试的逻辑。

思考到绝大部份用户对应数据不会进行批改的状况下，对应代码就能够不进行数据删除。而是返回超时标记。

const EXTRA_INFO_CACHE_KEY = 'xxx.xxx.xxx';
const CACHE_TIME =  7 * 24 * 60 * 60 * 1000;

const getCachedExtraInfo = () => {const cacheStr = localStorage.getItem(`${EXTRA_INFO_CACHE_KEY}.${userId}`);

  if (!cacheStr) {return null;}

  let cache = null;
  try {cache = JSON.parse(cacheStr)
  } catch () {return null;}

  if (!cache) {return null;}

  if ((cache.expiredTime ?? 0) < new Date().getTime()) {
    return {
      data: cache.data,
      // 数据曾经超时了
      isOverTime: true,
    };
  }

  return  return {
    data: cache.data,
    // 数据没有超时
    isOverTime: false,
  };
}

const getExtraInfo = () => {const cacheInfo = getCachedExtraInfo();
  // 数据没有超时才返回对应数据
  if (cacheInfo && !cacheInfo.isOverTime) {return Promise.resolve(cacheInfo.data);
  }

  return getExtraInfoApi().then(res => {localStorage.setItem(`${EXTRA_INFO_CACHE_KEY}.${userId}`, {
      data: res,
      expiredTime: (new Data()).getTime() + CACHE_TIME,});
    return res;
  }).catch(err => {
    // 有数据，才返回，否则持续抛出谬误
    if (cacheInfo) {return cacheInfo.data;}
    throw err;
  })
}

这样的话，咱们能够保障绝大多数用户是能够持续失常应用的。但如果对应的接口不稳固，会让用户期待很长时间能力持续应用。

这时候开发者能够思考齐全摈弃异步代码，同时缩小缓存工夫。

const EXTRA_INFO_CACHE_KEY = 'xxx.xxx.xxx';
// 将缓存时效缩小为 5 天
const CACHE_TIME =  5 * 24 * 60 * 60 * 1000;

const getCachedExtraInfo = () => {const cacheStr = localStorage.getItem(`${EXTRA_INFO_CACHE_KEY}.${userId}`);

  if (!cacheStr) {return null;}

  let cache = null;
  try {cache = JSON.parse(cacheStr)
  } catch () {return null;}

  if (!cache) {return null;}

  if ((cache.expiredTime ?? 0) < new Date().getTime()) {
    return {
      data: cache.data,
      isOverTime: true,
    };
  }

  return  return {
    data: cache.data,
    isOverTime: false,
  };
}

const getExtraInfo = () => {const cacheInfo = getCachedExtraInfo();
  // 如果超时了，就去获取，下一次再应用即可
  if (cacheInfo.isOverTime) {getExtraInfoApi().then(res => {localStorage.setItem(`${EXTRA_INFO_CACHE_KEY}.${userId}`, {
          data: res,
          expiredTime: (new Data()).getTime() + CACHE_TIME,})
      })
  }
  return cacheInfo.data
}

参考文档

前端 api 申请缓存计划

手写一个前端存储工具库

激励一下

如果你感觉这篇文章不错，心愿能够给与我一些激励，在我的 github 博客下帮忙 star 一下。

博客地址