"Android APP GPU over-drawing" GPU over-rendering and optimization

First, the Android side of the lag

The Android app is prone to lag during specific use, such as having a meal when viewing a page, a slow response after switching tabs, or a slow operation when it comes to sliding.

Second, the reasons for the lag

There may be many reasons for the lag, such as:

1. High CPU

2. Memory Overflow

3. Main thread processing IO operation, etc.

...

Where over-drawn, is an easy to ignore but also best to modify and can see the effect of content, which the Android website gives the content of over-rendering: https://developer.android.com/topic/performance/ Rendering/overdraw.html

Iii. what is over-drawn

1, the concept of over-drawing and how to determine whether it is over-drawn?

Over-drawing is a repeated drawing of the same pixel when the interface is drawn, but what the user can see is only the topmost drawing.

Introduction to the Android display principle see: http://djt.qq.com/article/view/987

The display principle is described in a word: The Android application invokes the Surfaceflinger service to render the measured, layout, and painted surface to the display screen.

noun explanation

Surfaceflinger : Android system service, which is responsible for managing the frame buffer of the Android system, which is the display screen.

Surface : Each window of the Android app corresponds to a canvas (canvas), or surface, which can be understood as a window for Android apps.

With the developer settings on the Android side-debugging GPU over-drawing and choosing to display the over-drawn area, you can see the following:

Take the setup of Xiaomi 4-SMS interface as an example:

Where we can see four colors, namely: blue, green, light red and red

The meaning of the color logo is as follows: (where 1x means to draw excessively, that is, the red is already 5 and 5 times drawn)

(1) Blue 1x over-drawn

(2) Green 2x over-rendering

(3) Light red 3x over-drawn

(4) Red 4x over-drawn (4 times and above)

Acceptance criteria for the app:

(1) control over-draw as 2x

(2) Non-forced GPU case, no red area, that is, no 4x over-rendering situation

(3) The total area of the light red area does not exceed the 1/4 size of the screen

2, how to optimize?

The possible reasons for the general excessive drawing are:

(1) Useless background image

(2) level too deep

(3) Useless parent node, child node

(4) No 9patch images used

...

Here's an example of a login program I wrote myself to look at how long the OnCreate method takes to perform an optimization and comparison validation when drawing.

The first thing you see is a login page with over-drawing, and you can see that the red area occupies a large part

First of all, we remove the useless background color, then delete the useless nodes, such as a linearlayout parent node below there is only one button property, so there is no need to have linearlayout this node, delete it, Because there is no use of the picture, and then through the. 9 images and the effects of non. 9 images are compared.

There is no over-drawn login interface as follows:

Then we verify the average length of time by obtaining the time of multiple onccreate (each time we kill the process, we get 10 times, not including the first package):

This is the length of the oncreate that has an over-drawn installation package:

01-03 18:33:36.375 16700-16700/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:33:36.475 16700-16700/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:33:51.415 17067-17067/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:33:51.495 17067-17067/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:34:05.415 17416-17416/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:34:05.515 17416-17416/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:34:15.615 17689-17689/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:34:15.715 17689-17689/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:34:24.335 18011-18011/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:34:24.425 18011-18011/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:34:34.855 18297-18297/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:34:35.005 18297-18297/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:34:58.075 18821-18821/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:34:58.215 18821-18821/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:35:07.635 19100-19100/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:35:07.765 19100-19100/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:35:54.535 19385-19385/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:35:54.635 19385-19385/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:36:03.775 19675-19675/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:36:03.905 19675-19675/com.example.a58.testapplication d/oncreate:endcreate

Summary: MS as unit

100, 80, 100, 100, 90, 150, 140, 130, 100, 130

This is followed by the length of the OnCreate for the installation package without over-drawing:

01-03 18:42:49.445 24469-24469/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:42:49.525 24469-24469/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:42:57.185 24720-24720/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:42:57.305 24720-24720/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:43:07.075 24987-24987/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:43:07.185 24987-24987/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:44:26.615 26384-26384/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:44:26.715 26384-26384/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:44:34.475 26634-26634/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:44:34.575 26634-26634/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:45:03.965 27023-27023/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:45:04.065 27023-27023/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:46:04.285 28059-28059/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:46:04.375 28059-28059/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:46:43.925 28540-28540/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:46:44.045 28540-28540/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:47:03.865 28907-28907/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:47:03.975 28907-28907/com.example.a58.testapplication d/oncreate:endcreate

01-03 18:47:24.755 29303-29303/com.example.a58.testapplication d/oncreate:startcreate

01-03 18:47:24.855 29303-29303/com.example.a58.testapplication d/oncreate:endcreate

Summary: MS as unit

80, 120, 110, 100, 100, 100, 90, 120, 110, 100

By comparing the above data, we can see that the overall mean is reduced, the amplitude is nearly 10%, the maximum length of time is significantly reduced by 30ms

"Android APP GPU over-drawing" GPU over-rendering and optimization