鸿蒙开发5.0【帧率】解析

一、组件渲染和更新

1、渲染流程

在整个渲染流程中，首先是由应用侧响应消费者的屏幕点击等输入事件，由应用侧处理完成后再提交给Render Service，由Render Service协调GPU等资源处理后，再将最终的图像统一送到屏幕上进行显示。

• 应用侧（App）处理用户的屏幕点击等输入事件，生成当前界面描述的数据结构。其中，界面描述数据包括UI元素的位置，大小，资源，UI元素的绘制指令，动效属性等。
• Render Service（渲染服务部件）是图形栈中负责界面内容绘制的模块，其主要职责就是对接ArkUI框架，支撑ArkUI应用的界面显示，包括控件、动效等UI元素。Render Service的RenderThread线程在Vsync下触发UI绘制，绘制过程包含3个阶段：Animation动效，Draw描画和Flush提交。
• Display是显示屏幕的抽象概念，可以是实际的物理屏也可以是虚拟屏。

2、Vsync信号

由于屏幕刷新率是固定的，设备会以固定的频率发送vsync信号，以90Hz（1秒刷新90次）刷新率为例，每个Vsync周期是11.1ms（1000ms/90）。如果是120Hz，则每个Vsync的周期是8.3ms。如果数据处理时间过长或者组件过于复杂导致绘制时间过长就可能导致丢帧的问题。

3、ArkUI渲染管线结构与Frame性能打点

• Animation：动画阶段，在动画过程中会修改相应的FrameNode节点触发脏区标记，在特定场景下会执行用户侧ets代码实现自定义动画；
• Events：事件处理阶段，比如手势事件处理。在手势处理过程中也会修改FrameNode节点触发脏区标记，在特定场景下会执行用户侧ets代码实现自定义事件；
• UpdateUI：自定义组件（@Component）在首次创建挂载或者状态变量变更时会标记为需要rebuild状态，在下一次Vsync过来时会执行rebuild流程，rebuild流程会执行程序UI代码，通过调用View的方法生成相应的组件树结构和属性样式修改任务。
• Measure：布局包装器执行相关的大小测算任务。
• Layout：布局包装器执行相关的布局任务。
• Render：绘制任务包装器执行相关的绘制任务，执行完成后会标记请求刷新RSNode绘制
• SendMessage：请求刷新界面绘制。

4、UI更新流程

UI更新过程包含组件标脏过程以及布局过程，对应的元素会经历Build、Measure、Layout和Render等阶段。

1. Build是执行组件创建和组件标脏的过程
2. Measure是对组件的宽高进行测量的阶段
3. Layout是对元素进行在屏幕上位置进行