开发
API

小程序的运行时性能优化

结合小程序的运行流程图,我们可以考虑从以下几个方面进行优化:

降低 setData 调用频率

setData 接口的调用涉及逻辑层与渲染层间的线程通信,通信过于频繁可能导致处理队列阻塞,界面渲染不及时而导致卡顿,应避免无用的频繁调用。

优化手段

  1. 降低 setData  调用频率

减少不必要的 setData

当页面进入后台态(用户不可见,比如页面跳转后或者小程序切到后台),不应该继续去进行 setData,后台态页面的渲染用户是无法感受的,另外后台态页面去 setData 也会抢占前台页面的执行,造成不必要的额外性能开销。

优化手段

  1. 当页面进入后台态,停止调用 setData

尽可能使用异步 API

同步 API 会阻塞逻辑线程代码,使得后续代码无法执行

优化手段

  1. 尽可能使用异步 API

注意复杂的计算逻辑

复杂的计算逻辑会使得逻辑线程一直处于繁忙状态,可能导致无法响应用户的交互(点击没反应等)

优化手段

  1. 对于复杂的计算逻辑需要保持高度警惕,可以考虑调整交互逻辑、延迟执行、分片执行等方式优化可能导致的不好的用户体验

合理使用自定义组件

Page 中的 setData 会触发渲染层以页面级别进行 diff 操作,如果页面比较复杂且没有使用自定义组件,那么 diff 的成本会很高,导致体验比较差(更新卡顿、不粘手等感受)。如果页面转换为若干个组件,如果在组件中 setData, 只会触发渲染层对应组件的 diff 操作,diff 成本会降低很多,使用体验也会提升很多。 同时在 usingComponents 建议只注册当前页面有使用到的自定义组件,在小程序框架会根据 usingComponents 中的自定义组件注册(无论开发者在运行时是否有使用)。

优化手段

  1. 将页面根据业务场景拆分成数量合适的自定义组件
  2. 在 usingComponents 中只注册当前页面有使用到的自定义组件

减小不必要的用户事件通信

渲染层会接受用户事件,如点击事件、触摸事件等。用户事件的通信过程:当一个用户事件被触发且有相关的事件监听器需要被触发时,渲染层会将信息反馈给逻辑层。如果一个事件没有绑定事件回调函数,则这个事件不会被反馈给逻辑层。视图层中有一套高效的事件处理体系,可以快速完成事件生成、冒泡、捕获等过程。 视图层将事件反馈给逻辑层时,同样需要一个通信过程,通信的方向是从视图层到逻辑层。因为这个通信过程是异步的,会产生一定的延迟,延迟时间同样与传输的数据量正相关,数据量小于 64K B 时在 30ms 内。

优化手段

  1. 去掉不必要的事件绑定(ttml 中的 bind 和 catch),从而减少通信的数据量和次数
  2. 事件绑定时需要传输 target 和 currentTarget 的 dataset,因而不要在节点的 data 前缀属性中放置过大的数据

通过以上几个方面的优化方向,我们可以在一定程度上提升小程序运行时的使用体验。

点击纠错
评价此篇文档