评论

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

看dataWorker如何解决真机显示效果出现错乱、提高页面加载和显示速度、并且做好全局数据管理。

https://v.qq.com/x/page/j079878zozx.html

在开发小程序的过程中,往往会遇到三个比较明显的问题,一是页面加载后的真机显示效果会在一瞬间(大约半秒)出现错乱,二是页面加载速度慢,尤其是页面需要请求接口的情况,三是全局管理数据,并且把数据同步到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

点赞 2
收藏
评论

5 个评论

  • Maverick
    Maverick
    2019-03-01

    看了下代码片段,不就是预加载吗。

    palindrome.js在注册页面时就执行了,你把请求写在这里,显示页面是快了,可意味着用户进入该页前,你就拿了数据,一来数据的时效性差,二来可能导致多余的请求(用户从头至尾都未进入该页)。

    说真的还不如做个loading界面,真要做预加载,也要在特定条件下预加载吧

    那4秒只差也就在这个请求上了,说提高小程序性能实属标题党。。。

    2019-03-01
    赞同 5
    回复
  • 陈式坚
    陈式坚
    2019-03-01

    实现原理在哪

    还有视频里的页面为什么会那么慢?

    2019-03-01
    赞同 1
    回复
  • 虾饺
    虾饺
    2019-02-28

    实现原理讲解一下?

    2019-02-28
    赞同 1
    回复
  • I-S
    I-S
    2019-03-04

    难道这不就是打广告的么?

    2019-03-04
    赞同
    回复
  • 小程序技术专员-拉风
    小程序技术专员-拉风
    2019-02-27

    也分享一下实现原理吧 :)

    2019-02-27
    赞同
    回复
登录 后发表内容