鸿蒙中 过度绘制调试与优化

一、过度绘制当应用页面布局的嵌套程度过深时应用渲染阶段会存在一些组件的绘制指令被其他组件的绘制指令部分或完全覆盖遮挡的情况造成冗余的CPU、GPU等计算资源的使用。定义一个屏幕上的像素点被重复绘制了多次的情况被称为过度绘制。过度绘制的危害危害说明CPU/GPU资源浪费重复绘制消耗计算资源渲染性能下降影响页面流畅度耗电量增加不必要的计算消耗电能二、使用方式2.1 使用前提前提条件需在系统设置中开启开发者模式。2.2 shell命令系统提供的过度绘制调试功能可通过shell进行开启或者关闭。操作命令开启param set debug.graphic.overdraw true关闭param set debug.graphic.overdraw false查看状态param get debug.graphic.overdraw2.3 命令示例# 开启过度绘制调试 param set debug.graphic.overdraw true # 关闭过度绘制调试 param set debug.graphic.overdraw false # 查看是否开启true表示开启false表示未开启 param get debug.graphic.overdraw三、过度绘制颜色对应关系开启了过度绘制调试功能后打开应用界面存在过度绘制情况的像素会被代表着不同级别的颜色方框高亮出来。颜色过度绘制次数严重程度原色无过度绘制正常蓝紫色1次轻度绿色2次中度浅红色3次重度深红色4次或更多严重规律颜色越深代表过度绘制情况越严重。四、过度绘制组件分析4.1 问题示例代码以下是一个存在冗余的背景颜色嵌套问题的示例应用程序Entry Component struct Index { State message: string Hello World build() { Row() { Column() { Column() { Column() { Column() { Column() { Text(Hello World) } .width(80%) .height(80%) .backgroundColor(Color.White) } .width(80%) .height(80%) .backgroundColor(Color.White) } .width(80%) .height(80%) .backgroundColor(Color.White) } .width(80%) .height(80%) .backgroundColor(Color.White) } .width(80%) } .height(80%) } }4.2 分析结果开启过度绘制调试功能后应用界面显示情况如下组件层级颜色过度绘制次数Text最内层深红色4次或更多内层Column浅红色3次中层Column绿色2次外层Column蓝紫色1次最外层Column原色0次规律从Hello World文字组件开始由内到外的Column组件分别显示为深红色 → 浅红色 → 绿色 → 蓝紫色 → 原色。说明随着嵌套程度的加深每一个Column组件的背景颜色绘制都会带来一次过度绘制。4.3 注意事项状态栏、侧边栏等系统界面也会在过度绘制调试功能中被统计到此为正常现象不属于应用需要优化的范围。五、优化方法方法说明显隐控制/条件判断通过显隐控制或者if-else条件减少页面上冗余的组件减少被遮挡组件的绘制减少被完全遮挡的组件上的绘制指令如背景颜色、组件内容等采用扁平化布局减少组件嵌套深度将大小相近、功能类似的布局组件合并为一个组件优化示例// 优化前多层嵌套 重复背景色 Column() { Column() { Column() { Text(Hello World) } .backgroundColor(Color.White) } .backgroundColor(Color.White) } .backgroundColor(Color.White) // 优化后扁平化布局 Column() { Text(Hello World) } .backgroundColor(Color.White)