小程序开发之利用本地缓存提前渲染界面

2018-09-25

字数统计: 838字 | 阅读时长≈ 3分

小程序开发之利用本地缓存提前渲染界面

1
2

“摘自微信官方团队”
讨论一个需求：我们要实现了一个购物商城的小程序，首页是展示一堆商品的列表。一般的实现方法就是在页面onLoad回调之后通过wx.request向服务器发起一个请求去拉取首页的商品列表数据，等待wx.request的success回调之后把数据通过setData渲染到界面上。

那么，在这种正常的请求中，是否还能有优化的方法？

以下代码为微信团队提供的优化思路

Page({
  onLoad: function() {
    var that = this
    var list =wx.getStorageSync("list")
    if (list) { // 本地如果有缓存列表，提前渲染
      that.setData({
        list: list
      })
    }
    wx.request({
      url: 'https://test.com/getproductlist',
      success: function (res) {
        if (res.statusCode === 200) {
          list = res.data.list
          that.setData({ // 再次渲染列表
            list: list
          })
          wx.setStorageSync("list",list) // 覆盖缓存数据
        }
      }
    })
  }
})

解析简单以上简单的代码：

这种做法可以让用户体验你的小程序时感觉加载非常快，但是你还要留意这个做法的缺点，如果小程序对渲染的数据实时性要求非常高的话，用户看到一个旧数据的界面会非常困惑。因此一般在对数据实时性/一致性要求不高的页面采用这个方法来做提前渲染，用以优化小程序体验。

整理这段官方的说明:

优点
让用户感知到小程序加载的速度非常快！

为什么？
假设发送请求之后的2秒内收到返回，那么在请求返回前可以渲染本地缓存的数据，不会产生用户，盯着一个白页面与加载页的情况。
避免了普遍的没有数据会留白与加载中的场景

原因：
在发起请求之前就可以把缓存进行渲染，在请求成功之后再次进行请求后返回的数据渲染。

缺点
难免会有老数据的一闪而过，如果请求服务端过程中不给力的话，会让用户在很长时间看到不正确的数据！

使用场景
数据不会实时变更的场景
用户认为这个不是很重要的场景
有本地缓存与无本地缓存的对比
对比条件为 “用户看到页面数据展现的时间”
测试场景为小程序模拟器

以上截图仅为，在模拟器上运行，无缓存总会比有缓存的提前平均在300MS的时间让用户感观到视图，当然模拟器上会有瑕疵的白色页面。

怎么样更好的使用微信小程序缓存？

什么时候使用本地缓存？
不能乱用

举个列子：订单列表，退换货商品详情这些地方不能用，如果一个商品的价格随意变动，只会给用户带来不稳定的因素。

什么时候要删除本地缓存？（这个我感觉还好）

小程序有10MB缓存大小，如果本地缓存超过10M，添加本地缓存的时候就会fail

本文作者： 前端圈
本文链接： https://lizheguang.github.io/zhaiGuang/2018/09/25/小程序开发之利用本地缓存提前渲染界面/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！