Vsync低功耗优化

对于HarmonyOS而言，不同来源和架构的绘制请求均通过Render Service（渲染服务）进行统一管理。为了确保不同来源的复杂绘制效果能在同一时间节点完成绘制、合成与显示，Render Service依赖Vsync实现全局统一的信号收发机制。如果将Render Service比作一个运行有序的公交系统，那么VsyncGenerator子进程便是始发站，而RSHardware子进程则代表终点站，即屏幕显示。每个需要使用Vsync的“乘客”都可以申请一张“车票”，VsyncGenerator线程会统计每个申请者的信息，确定合理的发车频率，如30、60、120Hz，经过后续的绘制和合成步骤后，最终反映在屏幕的刷新帧率上。

开发者可以在Profiler中抓取trace后，搜索以下关键的Trace点来分析一段时间内的Vsync申请和使用情况：

• 关键字“H:SendVsyncTo conn: xxx”：通常可以在VsyncGenerator进程中找到，显示该次发车的乘客数量。开发者可以在Profiler中搜索该trace点，以获取一定时间段内所有绘制请求者的信息。如下图所示，表明该次Vsync信号将发送给TaroAnimation、UITicker和Nweb_5754三个接收者。

  

• 关键字“H:xxx_RequestNextVsync”：表明申请者xxx请求了下一帧的Vsync车票，这一信息通常由其他绘制业务进程生成，并传递至RS的OS_IPC线程中。在实际应用中，除了ArkUI组件和第三方框架会申请Vsync外，一些帧回调函数也可能发起Vsync请求。例如，在一个应用静置场景中，请求者UITicker以60Hz的频率持续请求Vsync，而WM_31284（负责启动应用主进程）和RS（负责启动RS）的实际请求次数较少。实际上，这一请求行为源于React Native框架代码中默认存在的onUITick帧回调函数，该问题在react-native-harmony 0.72.70后续版本中得到了修复。此外，一些开发者还会使用DisplaySync、postFrameCallback等方法实现帧回调效果。建议开发者尽可能避免在所有场景下使用此类帧回调函数，而应选择性地动态开启或关闭，在页面内容长时间无变化时停止回调，当有滑动或动画效果时再重新开启。

  

• 关键字“H:ReceiveVsync name:xxx”：表明一个名为xxx的申请者消费了一帧Vsync的检票证明，这一进程通常会在之后拉起更多绘制逻辑，如下图中Vsync_webview、OS_VsyncThread、前台应用主线程以及Render Service均有被拉起的行为。其中前台应用进程的ArkUI组件刷新往往对应着ReceiveVsync name：WM_[进程号]，而对于一些非ArkUI的绘制组件，例如React Native、Flutter等组件往往依赖进程下的OS_VsyncThread来接受Vsync。开发者在进行Vsync分析时，可以按照下图所示的结构将VsyncGenerator与所有被拉起的进程置顶排列在一起，根据ReceiveVsync name来匹配到绘制对象，不同来源的绘制对象可能接收到的Vsync周期不同，表现为各自按需取用互不干涉。

  

在理解了Vsync的基础作用后，开发者需认识到Vsync的主要用途是保证绘制信号的垂直统一，对于开发者而言，需尽量避免在静置或单一组件刷新的页面中使用冗余的Vsync信号。从实际开发的角度上来看，DisplaySync和NativeVsync两种接口可能会对场景下的Vsync对象产生实质性的影响。对于使用了React Native、Webview、Flutter的应用，开发者可以通过Vsync的分析方法挖掘潜在功耗问题，不仅可以避免发生Vsync“发空车”导致带来冗余功耗，还可以规避实际没有显示的冗余绘制内容。下面给出了一些Vsync合理使用的低功耗建议。

• 应用使用displaySync方法实现绘制对象时，需做好生命周期管理。当对应的绘制对象被遮挡、划出屏幕或跳转至其他页面时，需要及时停止或销毁该对象，否则可能会产生冗余绘制。
• 应用在调用NativeVsync方法，或使用了对NativeVsync有一定封装的三方框架如React Native、Taro时，应当具备NativeVsync对象的管理意识，及时销毁无需显示的Vsync动效。

进一步展开DisplaySync下方的Trace信息可以发现，其中包含了大量的CanvasRenderingContext2D业务，其中，H:ViewPU.viewPropertyHasChanged位置，会打印出对应的ArkUI组件名称，帮助开发者定位到正在执行业务的组件。锁定可能造成问题的组件后，开发者可找到displayVsync对象的create、start以及stop三个关键状态控制的对应代码。

如下图所示，DisplaySync对象在回调函数中有动画相关的业务执行，但实际上并未对组件变量产生变化，也没有形成需要脏区绘制指令，仅带来冗余负载。开发者可以通过调用栈锁定冗余的函数以及对应的执行代码段。

// Stop DisplaySync and set to null when the component is unmounted to prevent idle running and memory leaks
aboutToDisappear() {
  if (this.backDisplaySyncSlow) {
    this.backDisplaySyncSlow.stop();
    this.backDisplaySyncSlow = undefined;
  }
  if (this.backDisplaySyncFast) {
    this.backDisplaySyncFast.stop();
    this.backDisplaySyncFast = undefined;
  }
}

// Pause DisplaySync objects when the component is not visible
.onVisibleAreaChange([0.0, 1.0], (isExpanding: boolean, currentRatio: number) => {
  if (!isExpanding && currentRatio <= 0.0) {
    console.info('Component is completely invisible.');
    if (this.backDisplaySyncSlow) {
      this.backDisplaySyncSlow.stop();
    }
    if (this.backDisplaySyncFast) {
      this.backDisplaySyncFast.stop();
    }
  }
})