Shulou(Shulou.com)06/02 Report--

Most people do not understand the knowledge points of this article "what is the method of rendering in Android performance optimization?", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the method of rendering in Android performance optimization" article.

1) Why Rendering Performance Matters

There are a lot of App that need to stack a lot of view components on the interface in order to achieve gorgeous visual effects, but this can easily cause performance problems. How to balance Design and Performance requires a lot of wisdom.

2) Defining 'Jank'

The screen refresh rate of most mobile phones is 60hz, and if there is no way to finish the task of this frame in 1000/60=16.67ms, the frame will be lost. The more frames you lose, the more serious the stutter the user will feel.

3) Rendering Pipeline: Common Problems

Rendering operations usually depend on two core components: CPU and GPU. CPU is responsible for computing operations including Measure,Layout,Record,Execute, and GPU is responsible for Rasterization (rasterization) operations. The reason for the common problem with CPU is the existence of non-essential view components, which not only lead to repetitive computing operations, but also consume additional GPU resources.

4) Android UI and the GPU

Understanding how Android uses GPU for picture rendering will help us better understand performance issues. A very direct question is: how is the picture of activity drawn to the screen? How can those complex XML layout files be identified and drawn?

Resterization rasterization is the most basic operation for drawing components such as Button,Shape,Path,String,Bitmap. It splits those components into different pixels for display. This is a time-consuming operation, and GPU was introduced to speed up the rasterization operation.

CPU is responsible for calculating the UI components as Polygons,Texture textures and then giving them to GPU for rasterization rendering.

However, it is troublesome to transfer from CPU to GPU every time. Fortunately, OpenGL ES can Hold those textures that need to be rendered in GPU Memory and operate directly the next time you need to render. So if you update the texture content where GPU hold lives, the previously saved state will be lost.

In Android, the resources provided by the theme, such as Bitmaps,Drawables, are packaged into a unified Texture texture and then passed to GPU, which means that every time you need to use these resources, you get the rendering directly from the texture. Of course, with the increasing abundance of UI components, there are more forms of evolution. For example, when displaying a picture, it needs to be loaded into memory after the calculation of CPU, and then passed to GPU for rendering. The display of text is more complex, which needs to be converted into texture by CPU, then rendered by GPU, and then returned to CPU to draw a single character, and then re-referenced the content rendered by GPU. Animation has a more complex operation flow.

In order to make App smooth, we need to process all the calculation, rendering, rendering and other operations of CPU and GPU within each frame of 16ms.

5) GPU Problem: Overdraw

Overdraw (overpainting) describes how a pixel on the screen is drawn multiple times in the same frame. In the multi-level overlapping UI structure, if the invisible UI is also doing the drawing operation, it will cause some pixel areas to be drawn multiple times. This will waste a lot of CPU and GPU resources.

When the design pursues more gorgeous visual effects, we are easy to fall into the strange circle of using complex multi-level overlapping views to achieve this visual effect. This can easily lead to a large number of performance problems, in order to achieve * performance, we must minimize the occurrence of Overdraw.

Fortunately, we can use the developer options in the phone settings, turn on the options in Show GPU Overdraw, and observe the Overdraw on the UI.

Blue, light green, light red and crimson represent four different degrees of Overdraw. Our goal is to minimize the red Overdraw and see more blue areas.

6) Visualize and Fix Overdraw-Quiz & Solution

As an example, you can see that there are several non-essential background through the XML file. By removing the non-essential background from the XML, you can significantly reduce overdrawing of the layout. One of the more interesting places is: for the setting of Avatar ImageView in ListView, in the code of getView, determine whether to get the corresponding Bitmap. After obtaining the image of Avatar, set the Background of ImageView to Transparent, and set the corresponding Background space-occupying image only when the image is not obtained, so as to avoid excessive rendering caused by setting the background image for Avatar.

To sum up, the optimization steps are as follows:

Remove Window default Background

Remove unnecessary Background from the XML layout file

Display a placeholder background picture on demand

7) ClipRect & QuickReject

As mentioned earlier, drawing updates to invisible UI components can result in Overdraw. For example, after Nav Drawer slides out of the front visible Activity, if you continue to draw UI components that are not visible in Nav Drawer, this leads to Overdraw. To solve this problem, the Android system minimizes Overdraw by avoiding drawing components that are completely invisible. Those View that are not visible in Nav Drawer will not be executed to waste resources.

Unfortunately, for those custom View that are too complex (usually overriding the onDraw method), the Android system cannot detect exactly what will be done in the onDraw, and the system cannot monitor and automatically optimize it, so Overdraw cannot be avoided. But we can use canvas.clipRect () to help the system identify those visible areas. This method can specify a rectangular area, only in this area will be drawn, other areas will be ignored. This API can help custom View with multiple sets of overlapping components to control the display area. At the same time, the clipRect method can also help save CPU and GPU resources. The drawing instructions outside the clipRect area will not be executed, and those components whose contents are in the rectangular area will still be drawn.

In addition to the clipRect method, we can also use canvas.quickreject () to determine whether it does not intersect with a rectangle, thus skipping drawing operations in non-rectangular areas.

8) Apply clipRect and quickReject-Quiz & Solution

The example figure above shows a custom View with the main effect of rendering multiple overlapping cards. The onDraw method of this View is shown in the following figure:

Open the developer option to show overrendering, and you can see that there is overrendering in our custom part of the View. So what is the cause of overpainting?

9) Fixing Overdraw with Canvas API

The following code shows how to use clipRect to solve the overdrawing of custom View and improve the drawing performance of custom View:

Here is the effect of the optimization:

10) Layouts, Invalidations and Perf

Android needs to convert XML layout files into objects that GPU can recognize and draw. This is done with the help of DisplayList. DisplayList holds all the data information to be drawn to the screen by GPU.

When a View*** needs to be rendered, the Display List will be created, and when the View is to be displayed on the screen, we will execute the GPU drawing instructions to render.

If the Property property of View changes (such as moving position), all we need is Execute Display List.

However, if you modify the contents of some visible components in the View, the previous DisplayList will no longer work, and we need to recreate a DisplayList and re-execute the rendering instructions to update to the screen.

Please note: any time the drawing content in View changes, you will need to recreate the DisplayList, render the DisplayList, update to the screen, and so on. The performance of this process depends on the complexity of your View, the state changes of the View, and the performance of the rendering pipeline. For example, suppose a Button needs to double its current size, and the position of the other child View needs to be recalculated and placed through the parent View before increasing the Button size. Changing the size of the View triggers the recalculating operation of the entire HierarcyView. Changing the location of View will trigger HierarchView to recalculate the location of other View. If the layout is complex, this can easily lead to serious performance problems.

11) Hierarchy Viewer: Walkthrough

Hierarchy Viewer can directly present the hierarchical relationship of the layout and the various properties of the view component. We can distinguish the relative performance of the layout Measure,Layout,Executive by three different colors: red, yellow and green.

12) Nested Hierarchies and Performance

The key point to improve layout performance is to keep the layout level as flat as possible to avoid repeated nested layouts. For example, in the following example, there are two lines of views showing the same content, which are implemented in two different ways, and they have different levels.

The following figure shows the performance test differences on Hierarchy Viewer using two different writing methods:

13) Optimizing Your Layout

The following figure illustrates how to optimize the layout of ListItem, using RelativeLayout instead of nested LinearLayout in the old scheme to optimize the layout.

The above is the content of this article on "what is the rendering method in Android performance optimization". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.