在任何页面框架下实现无顿挫感——秒开页面

大灰兔 · 发表于 2019-1-29 12:21:06

本帖最后由大灰兔于 2019-1-31 19:32 编辑

这两天在做一个社区类的小程序，发现在打开页面时它总要等那么一小会儿，在原来的数据基础上加载不行吗？非要重新加载！我仔细对比了微信朋友圈得出了结论——要充分利用缓存！显示页面时就加载缓存，页面完成时什么也不做！
首先我们还是先深刻理解页面周期这个图片，多看几次。

页面周期函数

页面打开缓慢的原因就是数据集要充分加载，所以需要时间。
现在，我以自己正在做的社区小程序为例说一下如何实现在任何页面框架下实现无顿挫感——秒开页面！

主页

这是主页，数据集内容最多的是话题、评论。这些数据集的自动模式都是“自动加载”。即打开主页这些数据都加载完毕了，然后我点击“求助”话题保存当前页跳转到“求助”话题页面。

话题页面

这时这些数据集基本上是一样的却还要加载，流量不可惜，看它在那里加载，浪费时间就不能忍了。所以，要把这些数据集的自动模式清空！
那数据集怎么显示呢？在主页我们要干一件事情：把数据集的数据缓存到本地，然后在“求助”话题页面显示时就从本地缓存加载数据，页面完成时什么也不做！

点击求助事件保存缓存数据

点击“求助”跳转，事件为数据保存到本地缓存。

话题页面显示