1# Overdraw Debugging
2
3Deeply nested layouts of an application can lead to performance issues such as redundant use of CPU, GPU, and other computing resources. For example, in a deeply nested layout, drawing instructions of some components are partially or completely covered by drawing instructions of others during rendering. When an application draws a pixel on the screen multiple times within a single frame of rendering, this is called overdraw. To help you reduce overdraw, the system introduces the overdraw debugging feature. With this feature, you can view the location and level of the component that causes overdraw.
4
5This topic describes how to use the overdraw debugging feature and how to reduce overdraw.
6
7## Enabling or Disabling Overdraw Debugging
8
9You can use the shell commands to enable or disable the overdraw debugging feature.
10
11- Prerequisites: Developer mode is enabled.
12
13- Enable overdraw debugging.
14
15  ```
16  param set debug.graphic.overdraw true
17  ```
18
19  ![](figures/overdraw-enable.png)
20
21- Disable overdraw debugging.
22
23  ```
24  param set debug.graphic.overdraw false
25  ```
26
27  ![](figures/overdraw-disable.png)
28
29- Check whether overdraw debugging is enabled.
30
31  The value **true** means that the feature is enabled, and **false** means the opposite.
32
33  ```
34  param get debug.graphic.overdraw
35  ```
36
37  ![](figures/overdraw-check.png)
38
39
40## Analyzing Overdrawn Components
41
42After you enable overdraw debugging and open an application UI, overdrawn pixels are highlighted by boxes with different colors. A deeper color represents a higher level of overdraw. The mapping is as follows:
43
44- Original color: no overdraw.
45- Blue-purple: Overdraw occurs once.
46- Green: Overdraw occurs twice.
47- Light red: Overdraw occurs for three times.
48- Dark red: Overdraw occurs for four times or more.
49
50
51The following is a sample application with redundant background color nesting.
52
53```ts
54@Entry
55@Component
56struct Index {
57  @State message: string = 'Hello World'
58
59  build() {
60    Row() {
61      Column() {
62        Column() {
63          Column() {
64            Column() {
65              Column() {
66                Text("Hello World")
67              }
68              .width('80%')
69              .height('80%')
70              .backgroundColor(Color.White)
71            }
72            .width('80%')
73            .height('80%')
74            .backgroundColor(Color.White)
75          }
76          .width('80%')
77          .height('80%')
78          .backgroundColor(Color.White)
79        }
80        .width('80%')
81        .height('80%')
82        .backgroundColor(Color.White)
83      }
84      .width('80%')
85    }
86    .height('80%')
87  }
88}
89```
90
91![Application UI with overdraw debugging enabled](figures/overdraw-demo-enable.png)
92
93The figure above shows the UI when the overdraw debugging feature is enabled.
94
95From the **Text** component **Hello World**, the **Column** components from inside to outside are displayed in dark red, light red, green, blue-purple, and original color. This indicates that the background of each **Column** component is rendered multiple times as the nesting depth increases.
96
97The system UI (such as the status bar and sidebar) is also displayed in a different color. This is a normal phenomenon.
98
99## Reducing Overdraw
100
101The debugging feature helps you find overdraw problems on the application UI. To reduce overdraw, you are advised to use the following methods:
102
103- Use the visibility control or the if-else statement to reduce redundant components.
104
105- Reduce drawing instructions on components that are completely blocked, such as the background color and component content.
106
107- Use the flattened layout to reduce the nesting depth. For example, combine layout components with similar sizes and functions into one component.
108