On the optimization of view in iOS

Introduction:

Let's think about a few questions, the product you've developed, and where else can it be optimized? Can you increase its frame rate? Can you reduce the extra CPU calculation? Is there an extra GPU rendering? The workload of this business is insignificant for the increasingly powerful devices, but as a careful developer, I find it necessary to talk about view optimizations in iOS.

This article starts from the most error-prone areas of the developer, combining examples to illustrate how to optimize the view from the following perspectives:

• Color Blended Layers

• Color Copied Images

• Color misaligned Images

• Color offscreen-rendered

This 4 option, which can be seen from the debug option of the simulator

Simulator options

Don't worry, we look at each one, first is the color blended Layers.

Color Blended Layers

The official describes it this way:

Shows blended view layers. Multiple view layers that is drawn on top of each of the with blending enabled is highlighted in red. Reducing the amount of red in your apps when this option is selected can dramatically improve your app ' s performance. Blended view layers often cause slow table scrolling.

Simply put, the color of each pixel on the screen is determined by the multi layer layer (if present) on the current pixel point, and the GPU calculates the RGB values of the blended colors, which are eventually displayed on the screen. This requires GPU computing, so we try to avoid setting alpha so that the GPU ignores all of the layers below and saves computational effort.

Let's take a look at the effect of setting alpha, where the small gray block is transparent.

Demo

After detection

The effect is obvious, and setting a transparent view allows the GPU to calculate the final result after the layer is blended.

I would like to mention opaque this attribute, it is generally accepted that View.opaque = Yes,gpu will not be mixed with the layer calculation. And this conclusion is wrong, actually view.opaque actually does not have the egg to use.

If you really want to achieve this effect, you can use Layer.opaque, this is the right approach.

Color Copied Images

"If an image was in a color format and the GPU can not directly work with, it'll be converted in the CPU."

Session 419 WWDC 2014 in detail this goods, in fact, this thing with the developer does not matter, encountered this situation, we can throw the pot to design (of course, you do the optimization caused by the image Color format changes, then there is no way).

In short, Apple's GPU only resolves the 32bit color format, remembering 32bit.

If you put a picture, and its color format is not 32BIT,CPU will first color format conversion, and then let the GPU rendering. The good CPU silently did this redundant work.

So give you two options:

• Let the design wet to you cut 32bit figure

• Run an asynchronous thread yourself to change the color to go, do not plug the original main thread that is very stressful!

Which one do you choose? Of course, let the design wet-cut diagram, I do not want to write more code.

And in the case of love, even if the asynchronous conversion of color, can also lead to performance loss, such as increased power, heat and strong change and so on.

On Demo:

Demo

After detection

Two of the same figure, only the use of a different color format, the above is 32bit, the following is 8bit, so, 8bit will lead to color Copied Images8, so that the CPU many operations.

Color misaligned Images

Misaligned image indicates that the points to be drawn cannot be mapped directly to pixels on the frequency screen, and the system needs to do anti-aliasing anti-aliasing on neighboring pixels, increasing the graphics burden, which is usually caused by the recalculation and setting of some view frame.

Very simply, do not appear when the image size differs from ImageView size, which triggers anti-aliasing calculations and increases performance loss.

On Demo:

Demo

Look out, the picture below is not the right size.

Therefore, the actual development, the local picture is better to control, only need to write the corresponding size is good, but for download down the picture, can be loaded after the size processing to meet imageview frame. Especially for many apps, there are a lot of tableview, if processed, will greatly improve the smoothness.

Color offscreen-rendered

The end is offscreen-rendered (off-screen rendering).

This thing is very complicated to say, I think just to know, off-screen rendering will cause the CPU to save a copy of the bitmap in the background, so it will cause the CPU redundant operation.

The way to avoid it is to avoid triggering the action:

• Overriding the DrawRect method

• Maskstobounds

• Some other actions that trigger off-screen rendering manually

Finally see a demo:

The rounded corners of the wicked

Discover Sin

, the off-screen rendering is triggered.

Summarize:

If these details are noticed in the development phase, then I don't think performance will be a big problem.

On the optimization of view in iOS