微信小程序性能二三事

2017-11-02 20:01:22 阅读：430 作者：子龙 来源：巨推传媒 分类：小程序开发

微信小程序性能二三事

小程序代码在ios上很溜，但是安卓机上性能问题很多，低端安卓机对性能调优更是要求贼高，稍不注意，页面就能卡死。

性能问题基本都是cpu不够用导致的卡顿，这种卡顿可能是1）dom太大，内存爆满 2）js操作频繁，js进程繁忙 3）渲染问题，可能是被js阻塞了，也有可能是所在环境的渲染机制不够优化

在本次为小程序开发的双十一会场页面时，总结出以下经验

存在的性能问题及解决方案

在开发中发现在低端机上几个小程序端需要注意的事：

1. dom大了后，bindtap事件会不灵敏，短时间连续触发的bindtap事件后续的会丢失。原生小程序测试时，3000个dom节点就有丢失现象。后来尝试了使用touchstart和touchend去模拟，发现虽然touchstart很灵敏，但是touchend会丢失（个人猜测小程序的tap事件也是通过touchstart和touchend模拟的）。我们的大促会场600个商品时我算了下大约13000个dom节点，低端安卓机事件丢的很严重，间隔几乎是秒级别才能触发下一次事件。所以解决方案只能减小dom量，添加dom懒加载和动态移除的逻辑，经过多次测试，比较理想的效果是预加载2屏

2）滚动时setState卡顿严重，如果滚动时有触发setState操作，那么setState成功可能发生在几秒后，即使滚动操作在几百ms内就结束了。这就导致导航类功能的滚动跟随效果在安卓机上反应特别慢，滚停到某个商品楼层后，过了1-2s才导航条才突然动一下，所以最终取消了安卓的滚动跟随效果。（不根据版本取消效果，是因为发现即使是安卓较新的7.1版本在性能不好的机器上也会这样）

3）白屏问题

快速疯狂滚动页面，前面的页面没渲染出就不停的往后滚，发现小程序不是优先渲染可视区域，而是一定要把曾经滚过的区域按顺序渲染了。所以如果快速疯狂滚动，后面的内容白屏等待时间会很久。考虑到正常用户不会有这种需求，想看后面的内容可以通过楼层导航过去，而且这个问题我们也找不到解决方案，所以这个现象没有处理。

注意事项

1）懒加载+动态移除非可视范围内的内容，让dom小下去

2）耗时的js操作异步化，不要阻塞主线程。落地一点说，小程序里不要做频繁的setState操作，不在state里放跟视图层无关的内容。譬如我之前为了代码清晰，把导航功能模块里的楼层位置信息放到了视图层也用的一个变量里，其实视图层并不直接用到这个信息，这个信息为了准确，又会在每次滚动后重新计算，导致频繁setState，且set的是跟视图层无关的数据，优化后，性能提升很明显。

3）还有跟小程序本身相关的，wx.createSelectorQuery系列接口都是异步的，会受主进程影响，如果主进程繁忙，这个接口返回时间会延迟很久也是s级别的，对于楼层导航和懒加载这种需要页面各模块位置信息的功能，不能每次操作都等这个接口返回，可以缓存数据，取缓存，然后用户的操作触发调接口更新缓存，在缓存有更新时，为了更准确，也可以主动触发下需要位置信息的后续处理函数。

4）少用scroll-view，这个组件对性能影响实在太大，单纯的只是需要一块可滚动区域，请用css+view解决

5）不知道微信的小程序做了什么，滚动操作时进程异常繁忙，滚动停止后很久才是可操作和执行js状态，所以尽量少的触发在滚动时的回调函数，节流函数必须合理用起来。

性能调优是个漫长的取舍过程，需要不断测试来获取最优效果。cpu只有那么多，一段时间只能干那么多事，那就要干效果较好最重要的事。

微信开发 微信 小程序开发

上一篇：微信小程序教学第三章第四节（含视频）：小程序中级实战教程 下一篇：反转？测试左右脑年龄的小程序结果不是随机的！

更多推荐

• 
  小程序开发 定制微商城分销系统 微信分销平台不单单是为了做好网络营销，其实在面对营销的时候更多的时候离不开市场，所以这个时候应该明确的就是微信分销应该做好具体的市场营销工作。一起来看看该怎么做...

  2019-03-21 17:28:12 2668

• 
  小程序开发 微商城有多种销售方式，让你快速实现分销 一、微商城有多种销售方式，让你快速实现分销 1、微商城采用主店无数分店的模式，让企业拉动与分销商之间在订单协作、商品信息、库存管理、渠道沟通等业务环节的紧密协作...

  2019-03-21 17:27:07 2949

• 
  小程序开发 企业进行微信小程序开发的好处有哪些呢？ 目前， 微信 小程序 开发 呈现出 持续火热 的状态 ，越来越多的商家开始关注并开发自己的小程序， 但是，我们也看到，还有一部分的 商家 持观望的态度，不知道是...

  2019-03-21 17:25:57 3047

• 
  小程序开发 企业如何发挥微信小程序的作用呢？ 现在， 微信小程序 成为了企业在进行微信营销时又一个有效的方式，许多企业通过 微信小程序 开发的方式建立起微信上的营销覆盖网络，但是，有些企业在开发小程序之后，...

  2019-03-21 17:24:53 2953

• 
  小程序开发 企业进行微信小程序开发后能够赚钱吗？ 微信小程序 对于许多企业的发展是有助力作用的，因此，现在 许多公司在小程序出现已经开始申请自己的账号，一些提前开始运营 微信小程序 的公司已经取得了不错的成绩，...

  2019-03-21 17:23:46 3022