微信小程序开发-开发笔记数据缓存功能优化性能

微信小程序开发-开发笔记数据缓存

开发到商品分类页面时，数据量太大，每次刷新都重新请求一次，浪费时间

所以利用数据缓存特性来优化性能

原小程序初始化生命周期期间：

page{
    onLoad : function(options){
        // 获取数据
        getCategoryList();
    }
}

问题就在这里，无论你使用后退按钮还是弹回到当前页面，请求都会被发送。 这样虽然可以获得最新的数据，但是会消耗前后端的性能。 而且，这个页面是电商项目的分类页面。 从实际情况来看，测试可以容忍5分钟

改进思路：

请求数据后，存入用户本地缓存，运行时判断缓存中是否有数据，如果有则判断是否超时

代码：

// 获取本地存储的数据
    const cates =wx.getStorageSync('cates');
    if(!cates){
      // 不存在 发送请求获取数据
      this.getCategoryList();
    }else{
      // 有旧的数据
      // 判断有没有过期
      // 定义过期时间 五分钟
      if(Date.now() - cates.time > 1000 * 60 *5){
        this.getCategoryList();
      }else{
       // 直接进行处理后渲染页面
      }
    }

Web本地存储和小程序存储的区别

1. 书写方式不同

​ 网址：

小程序：

2、存储后的类型转换

​ web：无论什么数据都会被调用

​ 小程序：不自动转换保存

开发到商品分类页面时，数据量太大，每次刷新都重新请求一次，浪费时间

所以利用数据缓存特性来优化性能

原小程序初始化生命周期期间：

page{
    onLoad : function(options){
        // 获取数据
        getCategoryList();
    }
}

问题就在这里，无论你使用后退按钮还是弹回到当前页面，请求都会被发送。 这样虽然可以获得最新的数据，但是会消耗前后端的性能。 而且，这个页面是电商项目的分类页面。 从实际情况来看，测试可以容忍5分钟

改进思路：

请求数据后，存入用户本地缓存，运行时判断缓存中是否有数据，如果有则判断是否超时

代码：

// 获取本地存储的数据
    const cates =wx.getStorageSync('cates');
    if(!cates){
      // 不存在 发送请求获取数据
      this.getCategoryList();
    }else{
      // 有旧的数据
      // 判断有没有过期
      // 定义过期时间 五分钟
      if(Date.now() - cates.time > 1000 * 60 *5){
        this.getCategoryList();
      }else{
       // 直接进行处理后渲染页面
      }
    }

Web本地存储和小程序存储的区别

1. 书写方式不同

​ 网址：

小程序：

2、存储后的类型转换

​ web：无论什么数据都会被调用

​ 小程序：不自动转换保存

TAG标签：微信小程序缓存