问题现象
动态更新的页面在渲染过程中出现卡顿,页面内容长时间无响应或未及时刷新问题,如何定位?
背景知识
- XComponent:一种渲染组件,可作为EGL/OpenGLES和媒体数据写入,通常用于满足应用较为复杂的自定义渲染需求,例如相机预览流的显示和游戏画面的渲染。XComponent持有一个Surface,应用能通过调用NativeWindow等接口(比如OH_NativeWindow_NativeWindowFlushBuffer)将自绘制内容传送至该Surface。XComponent负责将此Surface整合进UI界面,其中展示的内容正是应用传送的自绘制内容。
- ArkUI Inspector:DevEco Studio提供的布局分析工具,开发者可以借助它预览真机或模拟器中的UI效果,快速定位布局层级问题,也可以观察组件属性、不同组件之间的关系等。
- DevEco Profiler:集成在DevEco Studio中的性能调优工具,提供场景化的性能调优功能体验,可以检测应用的性能指标、录制Trace信息,通过分析Trace数据能够发现代码中的性能瓶颈,进而优化性能,详细内容可看使用Profiler进行性能调优。
问题定位
- 使用ArkUI Inspector抓取该页面布局,发现该动态变化的页面使用XComponent组件来完成渲染绘制。
- 使用DevEco Profiler Frame工具抓取该过程的Trace信息,在上方搜索框中输入H:NativeWindowFlushBuffer找到应用将自绘制内容传送到XComponent组件的Surface的相关线程。从下图中可看到该线程为应用的44780子线程,同时有持续1.6s左右未将自绘制内容传送到XComponent组件的Surface。

在过程该线程大部分时间处于Running状态,在执行耗时操作。

- 通过查看Callstack泳道中的XXX[44780]子泳道,可看到耗时主要集中在libxxx.so文件的函数中。

分析结论
应用线程在执行耗时操作,未将自绘制内容传送到XComponent组件的Surface,导致动态变化的页面卡住一段时间无变化。