这篇文讲什么

我们的微信小程序性能优化总结。(此文只对微信小程序开发者有用(废话))

为什么写这篇文

网上搜 "小程序 性能优化" 已经有很多文章。
这篇文纯粹是用我们的经验做个补充,不是为了列个全集。

注:这些"知识"都是相对表层的东西。以后某一次功能更新或变动。
所有这些都可能作废。而且如果离开小程序做其他开发,这些知识也没卵用了。
所以不要太把这些东西当回事。

前提

我们的小程序类似 Instagram。是个图片分享 App

性能优化总结

  1. 首页不用 swiper + scroll-view 来实现整个页面的手势切换

    比如业务需求是小程序首页是某种信息流,然后左上角有 Tab,手势左滑右滑可以方便的切换 Tab,切换界面。我们是用 swiper + scroll-view 来实现(暂时不知道有没有更好的实现方式)
    实测发现这样的组合会导致首页非常卡。为了个手势切换把首页弄这么卡无法接受。
    所以完全去掉了这2个组件,左上角的 tab 点击之后切换页面。实现方式就是 bind:tap 搭配 wx:if

  2. 首页不用 swiper 做多图切换
    我们的业务需求是用户可以上传多张图,浏览的时候可以左右滑动查看(对,就是和 Instagram 一样)实测发现首页如果有多个 swiper 会非常卡。特别是安卓端会比 iOS 卡很多。
    变通解决方案是不用 swiper,如果是多张图,右下角显示一个"多图图标",用户看了就知道这个有多张图,想看的话会点击一下,进入另一个页面,另一个新页面里就是图片详情内容,就1个 swiper。所以用2个页面来解决这个问题。首页就完全没有 swiper 了

  3. 首页组件尽量少 setData
    用户的一篇内容就是一个首页组件。内容可以点赞,收藏。关注。这3个状态在刷新后也是要一致的。比如你给某篇内容点赞了,刷新后当然“红心”是要实心的,代表点赞过了。
    组件里要么用 property 要么用 data。实测发现如果在组件的 ready function 里去判断是否 liked 过然后 setData。因为我们一页有16条数据。那就是16次 setData。会导致载入第二页的16条非常卡,卡个1-2秒然后恢复正常(因为都在 setData)
    所以 liked, faved, followed 就直接传属性进去,如果用户有操作,需要修改状态,就直接 setData 改属性也是可以的。

  4. 首页数据每一页尽量少一些
    我们一开始是一页返回16条数据。
    但其实2篇用户帖子就占满一个屏幕了。所以改成了一页8条。提升了一定速度。

  5. swiper 尽量能不用就不用。因为问题多多

问题1:滑动时有卡死问题 https://developers.weixin.qq.com/community/develop/doc/000c8e156202c0c8c926c50c851800?highLine=swiper

问题2:关屏再开有白屏问题 https://developers.weixin.qq.com/community/develop/doc/00064847b903b844d837b89ff5b800?highLine=swiper

如果你在微信开发者社区里搜索 swiper,会看到大把大把的类似问题
https://developers.weixin.qq.com/community/search?query=swiper&blogCategory=511&page=21

目前我们小程序里只有1个地方用了 swiper,就是以类似 Instagram 的形式显示用户上传的多张图。
滑动卡死问题很少出现了。白屏问题还是有的。

全文完

感谢阅读