Excessive rendering of Android layout optimization

If a layout is very complex, then you need to check whether there is excessive drawing, if there is, it is likely to cause a decrease in refresh rate, causing the phenomenon of lag. So what is over-drawn? Over-Drawing is the addition of multiple controls in the same area. This is like when we draw, white paper is no drawing of the artboard, if we draw a house, painted red, and painted on the window, the picture on the brown, the window and painted blue glass, this repetition of the overlay is over-drawn, the result is on the white paper, over-painted area of the ink will be soaked by the fountain of Wet, The display will appear slower on the phone. If this is a perceptual understanding, then I quote the following passage to explain rationally:

1. The layout file is an XML file, and the inflate layout file is actually parsing the XML, creating the corresponding layout object and associating it according to the tag information. The more tags and attribute settings in XML, the deeper the depth of the node tree, the more the judgment logic, the nesting and recursion of the function are to be executed, so the more time is consumed;

2. Inflate operation is only the first link of the layout effect, an interface to display, after Requestlayout to perform a series of measure, layout, draw operations, each step of the execution time will be affected by the layout itself. The final display of the interface is implemented after all of these operations have been completed, so if the layout quality is poor, the time cost of each step will increase, and the final display time will be longer.

Now, let's say how to see if there is over-drawing, and how to avoid it.

First, see if there is excessive drawing

1. GPU Transition drawing: For over-drawn tests are primarily tested by hand and are also the preferred way to discover application transitions. Display GPU over-draw by opening developer options (Meizu Phone: Settings-Accessibility – Developer tools – Hardware accelerated rendering-debug GPU transition drawing- Displays the transition drawing area.) to test (PS: Only android4.2 and above are available for this feature)

1. Color identification: From good to poor: blue-green-pink-red

1. Blue 1x over-drawn
2. Green 2x over-rendering
3. Light Red 3x over-drawn
4. Over 4x over-painted red

2. Acceptance criteria:

1. Control over-draw as 2x
2.4x over-rendering is not allowed
3. Over 3x of area beyond screen 1/4 is not allowed (light red area)

We can see that the text part appears green (because it is superimposed with the blue at the bottom, so it becomes yellowish green), in the top switch part of the red, that is, four layers of excessive painting, which need to be avoided. However, because the position on the screen is very small, you can consider it as appropriate.

The upper side is the Xiaomi store screenshot, you can see a large number of over-drawn areas, summed up over-drawing more common in the text area.

Ii. ways to avoid over-drawing

The following text comes from someone else's blog:

Gracker
Source: androidperformance.com
The copyright of this article is owned by the author, welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.
Enjoy: Weibo rewards

1. Use Relativelayout and linearlayout as much as possible, do not use absolute layout absolutelayout,

1. In the same layout hierarchy , it is recommended to use LinearLayout instead of Relativelayout because the LinearLayout performance is slightly higher.
2. When completing a relatively complex layout , it is recommended to use relativelayout, relativelayout can simply implement linearlayout nesting in order to achieve the layout.

2. Extract the reusable components and use the Include tags;
3. Use the viewstub tag to load some infrequently used layouts;
4. Dynamically inflation view performance is better than setvisiblity performance. Of course, using viewstub is the best choice.
5. Use the Merge tab to reduce the nesting level of the layout
6. Remove the extra background color

7. For layout with multi-layered background color, leave the color of the top layer, and the other bottom color can be removed
8. For layout using the selector background (such as the ListView item, which uses selector to mark a click, select a different state), you can set the color of the normal state to "@android: color/ Transparent ", to solve the corresponding problem

9. Embedding the LinearLayout with the Layout_weight attribute will cost expensive system resources when drawing, because each subassembly needs to be measured two times. This problem is especially important when using the ListView with the GridView because the subcomponents are created repeatedly. So try to avoid using layout_weight.
10. Make layout wide and shallow, rather than narrow and deep (embodied in the tree view of the Hierarchy Viewer )

Many of the above mentioned tools and techniques I have explained in the previous article, in the actual development process need to think a lot, according to the situation to use different skills.

Reference from:

Http://www.androidperformance.com/android-performance-optimization-overdraw-1.html

Http://www.open-open.com/lib/view/open1421656495031.html

Excessive rendering of Android layout optimization