收藏
评论

如何使用dataWorker大幅度提高小程序性能


(点击图片跳转查看视频


在开发小程序的过程中,往往会遇到三个比较明显的问题,一是页面加载后的真机显示效果会在一瞬间(大约半秒)出现错乱,二是页面加载速度慢,尤其是页面需要请求接口的情况,三是全局管理数据,并且把数据同步到Page或者Component内显示麻烦。所以我们研发了一个叫做dataWorker的工具来解决真机显示效果出现错乱、提高页面加载和显示速度、并且做好全局数据管理。


我们在开发多个小程序的过程中,尤其是在解决用户数据上报丢失时发现,微信小程序的生命周期在真机中其实为伪周期。事实上,完全可以在生命周期外走逻辑,请求接口,唯一比较麻烦的把数据同步到页面内。这也就是为什么我们要用dataWorker(可以理解为浏览器内的service worker)来同步更新视图。我相信,市面上的大部分业务方往往是在页面的`onLoad`或者`onShow`的时候才开始加载并且渲染页面的,最终导致了体验上的卡顿,在数据上则常常出现业务PV点消失的情况。但是如果我们在页面还没有被打开之前就加载好了页面,那么打开的速度当然会快很多。


当然,有很多业务方已有的代码实际上是不需要有全局数据介入的,所以我们又添加了一个开关,叫做palindrome(可以理解为数据双向绑定把)。


然后在需要使用worker的Page或Component内添加palindrome: true,如下:


Page({
 
    palindrome: true,
 
    data: {...},
 
    onLoad(){...}
 
})


那么比方说我现在想要设置该页面的数据,我依然可以使用原先微信提供的this.setData({...}),这和dataWorker不冲突,也不会改变dataWorker内的数据,但是我同时又可以用dataWorker.data = {...}或dataWorker.list = [...]这种办法去修改页面的数据(会直接影响视图)。


dataWorker 代码片段,需要使用appId,并且申请《微盟RPRM测试版》插件(wx10692d472c83e02c)0.0.4或以上版本的使用权限。并且需要关闭安全域名检查(需要请求接口)。


代码片段:https://developers.weixin.qq.com/s/5f5PDMmv7O4J

最后一次编辑于  2018-12-19
赞 3
收藏

3 个评论

  • 湫
    2018-11-29

    跟没说一样

    2018-11-29
    赞同 2
    回复
  • &|!🤗
    &|!🤗
    2018-12-04

    伪生命周期能说的再详细一点吗?不在onLoad里请求渲染页面难道是直接在Page({})外边请求渲染?

    2018-12-04
    赞同
    回复 4
    • 微盟
      微盟
      2018-12-06

      是的,具体代码片段会在一段时间内进行上传演示。

      2018-12-06
      回复
    • 微盟
      微盟
      2018-12-19

      dataWorker 代码片段,需要使用appId,并且申请《微盟RPRM测试版》插件(wx10692d472c83e02c)0.0.4或以上版本的使用权限。并且需要关闭安全域名检查(需要请求接口)。


      代码片段:https://developers.weixin.qq.com/s/5f5PDMmv7O4J

      2018-12-19
      回复
    • &|!🤗
      &|!🤗
      01-08回复微盟

      老哥,我现在也试图把一部分请求或者初始化逻辑搬到Page()调用之前进行,遇到了几个问题。
      1.当初始化是异步的,如何同步处理页面实例化以及初始化完成回调。(这个应该就是你dataWorker主要的工作)。

      2.写在页面上的初始化函数会在页面注册的时候立即触发,但我发现在真机调试的时候所有页面好像都是在onLaunch后一块register的,即使没进到这个页面里,不知道你有遇到这个问题没。

      3.还有就是在真机测试的时候同样发现,写在Page()实例化之前的方法似乎只会执行一次,哪怕页面unLoad之后再进去,Page()是会重新调用,但Page之外的方法和值不会再调用和改变。

      01-08
      回复
    • 微盟
      微盟
      01-22回复&|!🤗
      1. 对。

      2. 没有。

      3. 这个效果是对的。如果要和生命周期关联,可以把执行的代码放入一个函数内,在生命周期内再次调用。

      01-22
      回复
  • 沉冰
    沉冰
    2018-11-22

    给个代码片段呗

    2018-11-22
    赞同
    回复 2
    • 沉冰
      沉冰
      2018-12-19回复微盟

      有时间研究一下

      2018-12-19
      回复
    • 微盟
      微盟
      2018-12-19回复沉冰

      👍

      2018-12-19
      1
      回复