2019-1-11 微信小程序 性能优化

这篇文讲什么

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

为什么写这篇文

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

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

前提

我们的小程序类似 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 的形式显示用户上传的多张图。
滑动卡死问题很少出现了。白屏问题还是有的。

全文完

感谢阅读