#性能体验优化指南

#通用性能优化

• 通用性能优化指南参见

#特定性能优化

#1、性能检测

• 开启 vConsole 工具进行性能监测，具体步骤为：
  • a. 小程序设置预发版本且涂鸦 App 账号已添加白名单。
  • b. 进入面板后，长按右上角 x ,会弹出 App 的基础信息，下方有“打开调试”按钮
  • c. 点击打开调试工具
• 打开性能监测
  • a. 打开 vConsole 工具，找到 Perf 栏，点击 “Open FPS monitor” 即可开启性能监测
  • b. 点击实时性能监测面板可以切换性能指标。
• 性能指标
  • 主要关注两个指标
    • FPS
      • 来判断线程是否过载
    • MT
      • 判断逻辑层与视图层传递数据过多过快

#2、高频操作优化

• 当有高频操作且页面状态需要实时更新时，建议使用 Rjs 或 Sjs 能力。
• 如果存在跨组件高频实时操作，建议使用 eventChannel 能力，注意 eventChannel 可用于 Rjs 或 Sjs 之间相互间的数据传输（比如 Sjs => Sjs/Rjs 或 Rjs => Rjs/Sjs）。
  • 例如图示场景：拖动色盘（组件1）是需要灯带（组件2）实时更新。

#3、动画优化

• 动画方案一般有以下几种：
  • CSS 动画
  • JS 动画
  • Lottie 动画
  • GIF 图
  • Canvas / SVG 自行绘制
• 建议与选择：
  • CSS 动画：优先选用, 当用 CSS 很难实现时再考虑其它实现方式。
  • JS 动画：如果动画比较简单且更新频率不高，可以使用，不建议使用 JS 直接实现复杂动画。
  • Lottie 动画：复杂动画，⚠️注意一个页面上同时使用不要超过2个，否则可能会卡顿。
  • GIF 图：如果动画比较复杂且需要多个动画，那么建议使用 GIF 图，注意同一个页面上也不能过多（建议不超过6个）。
  • Canvas / SVG 自行绘制：如果交互复杂的动画，可以使用。