Things to Optimize app performance (ii)

Source: The old boy under the tree

Links: http://www.jianshu.com/p/2a01e5e2141f

This time, let's talk about the things that slide in the iOS app. iOS in order to improve the smoothness of the slide, deliberately when sliding the Runloop mode to the Uitrackingrunloopmode, in the process of focusing on the slide-related work, which is the reason why the nstimer in the sliding process is not working, Because two of them are not under the same mode. However, we may often encounter a situation where the slippage is not smooth, for example, in a project where the sliding tableview is not very smooth, feeling a little uncomfortable, even the best performance in the test 5s (touch and other feelings more intuitive).

TableView Slide is not smooth

How to deal with this situation, the analysis of image animation performance is mainly used in the core animation this component, the first simple introduction of some of the frequently used options:

• Color Blended Layers

  The layer labeled blending is red, the opaque layer is green, and usually we want the more green areas to be as good as possible.

• Color Hits Green and Misses Red

  If we set Viewlayer's shouldrasterize to Yes, the layers that were successfully cached will be labeled green and vice versa, and the following will be described in detail below.

• Color copied Images

  Mark images that were copied by the core animation. This is mainly because the color format of the image can not be processed directly by the GPU, need to do the conversion on the CPU side, if the main line to do this operation on the performance will have a certain impact.

• Color misaligned Images

  The scaled picture is labeled yellow, and pixel misalignment is marked in purple.

• Color offscreen-rendered Yellow

  Indicates which layers need to be rendered off-screen (Offscreen-render).

After a brief introduction to some of the core animation, we look back to see what issues affect the performance of the graph, which is excerpted from WWDC2014 (advanced graphics and animations for IOS Apps, Some of the above sharing is very technical)

Performance Investigation Mindset.png

When you run into performance problems, you can think about:

Is it limited by CPU or GPU?

Do you have unnecessary CPU rendering?

Are there too many off-screen rendering operations?

Are there too many layer blending operations?

Is there a strange picture format or size?

Does it involve expensive view or effects?

Is the hierarchical structure of view reasonable?

So what are some of the things you should start thinking about? Often when graphics performance problems occur, such as the list slippage is not smooth, animation, and so on, mostly due to offscreen Rendering (off-screen rendering) or blending, because this is involved in every frame of animation.

Offscreen-render

What is Offscreen-render? Offscreen-render involved more content, there is offscreen-render that there is onscreen render,onscreen render refers to the GPU in the current screen buffer for display rendering, Conversely Offscreen-render is not in the current screen buffer, but in another buffer to render, Offscreen-render has two forms:

Offscreen-render of the CPU

Use the CPU to complete rendering manipulation, usually when you use:

• DrawRect (do not write an empty DrawRect method in a subclass if you do not have a custom-drawn task, because if you implement this method, the view will be assigned a homestay map with pixel dimensions equal to the view size multiplied by the value of Contentsscale, resulting in a waste of resources)

• Using the core Graphics

  The above two cases use the CPU off-screen rendering, first allocate a piece of memory, and then render operation to generate a copy of the bitmap bitmap, the entire rendering process will be synchronized in your app, and then send the bitmap package sent to iOS a separate process –render server, ideally , render server gives the content to the GPU to display directly on the screen.

Offscreen-render of the GPU

Using the GPU to create a new buffer outside the current screen buffer to draw, usually occurs:

• Set Cornerradius, masks, Shadows,edge antialiasing, etc.

• Set layer.shouldrasterize = YES

Rendering process

What effect does Offscreen-render have on performance? Generally speaking, off-screen rendering refers to the GPU this block (of course, the CPU will also have an impact, also need to consume a certain amount of resources), such as modifying the layer's shadow or rounded corners, the GPU needs to do additional rendering operations. The GPU is usually very fast when rendering, but when it comes to offscreen-render, it can be a bit different, because there is a new buffer to be added to render, Then the process of drawing to the current screen needs to do onscreen and offscreen context of the switch, the process of consumption will be more expensive, involving OpenGL pipeline and barrier, and offscreen-render in every frame will be involved, Therefore, improper handling will certainly have a certain impact on performance, so you can minimize the offscreen-render layer, and see which layers require off-screen rendering can be detected with the instruments Core animation tool, Color The offscreen-rendered yellow option marks the corresponding layer as yellow.

Blending

If the top view is opaque, it is possible to use the corresponding color of the view directly, but if the view is transparent, it is necessary to calculate the color value of the pixel, the more transparent the view, the greater the calculation, and therefore the performance of the graph will have a certain impact, So you can also minimize the number of transparent layers.

Demo

Here is a simple demo (Https://github.com/FreeMind-LJ/OptimiseDemo) optimization process, this demo involves the problem is encountered in the actual project, that is, the top of the list of the chart slide is not smooth situation- Offscreen-render caused by shadows and rounded corners.

The entire page is a simple tableview, where the avatar is rounded, a label has a shadow effect, and when sliding on the ipod the frame rate is only poor 28FPS.

Color offscreen-rendered Yellow

28fps.png

Where the yellow area is the off-screen rendering, which is a layer with rounded corners and shadows.

Shadowpath

You can set the shadow effect of a label by:

Cell. Sign. Layer. Shadowoffset = cgsizemake(0, 2);

cell. Sign. Layer. Shadowopacity = 0.5;

cell. Sign. Layer. Shadowcolor = [uicolor blackcolor]. Cgcolor;

But you can see that this will lead to off-screen rendering, a simple way to not need off-screen rendering is to make the path of the shadow, that is, set the Shadowpath property of the layer, there is no yellow in the place where the shadows are found by instruments, and the frame rate is increased to 40FPS:

Cell. Sign. Layer. Shadowpath = [uibezierpath bezierpathwithrect:cell. Sign. Bounds]. Cgpath;

Set Shadowpath to eliminate off-screen rendering. png

Rasterize

For a similar performance problem with rounded corners, the simplest thing to do is not to use rounded corners in the list, and if you want to use rounded corners, one of the quickest ways to improve performance is to set the layer's shouldrasterize to Yes:

Cell. Layer. Shouldrasterize = YES;

cell. Layer. Rasterizationscale = [uiscreen mainscreen]. Scale;

Although the rasterize layer also causes off-screen rendering, as shown, the entire cell is labeled yellow:

Shouldrasterize.png

After the layer is set Shouldrasterize=yes, the rasterized layers are saved as bitmaps and cached, and the effects such as fillets or shadows are stored directly in the bitmap, and when they need to be rendered to the screen, only the corresponding bitmap is displayed in the cache. Speeds up the entire rendering process. You can see if the layer is cached by ticking the color Hits green and Misses red option in instruments core animation, and if the layer is shown as green it is already cached, that is, the contents of this buffer are reused. Instead of recreating the buffer, it is marked in red. If you can see the settings shouldrasterize, the cell is marked green, if the sliding process is found to be red proof that there is a problem:

Cached.png

And look at the frame rate now sliding:

After optimization. png

It can be found that the performance of scrolling is greatly improved, and rasterization is significantly improved for those layers that have many sub-view nested together, view hierarchies, or complex effects, because the content is cached in the bitmap. But there are some things to be aware of when using rasterization:

• For layers with basic content

  The content of the fake layer often changes, such as in the cell is involved in animation and so on, then the cached content is invalid, the GPU needs to recreate the buffer, resulting in off-screen rendering, which involves OpenGL context switch, but reduce performance.

• Don't overdo it.

  The size of the buffer is set to 2.5 times times the size of the screen, and if excessive use also results in a lot of off-screen rendering.

• If the cached content is more than 100ms unused, it will be recycled.

Tips

• For fillets, you can use an intermediate circular transparent diagram to cover the top, although this introduces blending operations, but in most cases performance is better than off-screen rendering.

• Make your view hierarchy flatter, because OpenGL may need to stop to synthesize the two into a buffer and then render it when it renders a layer with a sub-layer layer. (When the OpenGL renderer goes to draw each layer, it may has to stop for some subhierarchies and composite them into a s Ingle Buffer).

• Delay Loading Pictures

  Sometimes in the side of the scrolling edge of the picture may have some impact, so you can scroll when the ImageView do not perform setimage operation, scrolling stopped when the picture is loaded, As the Nsrunloop is in Uitrackingrunloopmode mode when scrolling, you can use the following method to put the settings picture in Nsdefaultrunloopmode mode:

UIImage *downloadedimage = ...;

[self. Avatarimageview performselector:@selector(setimage:)

withobject:downloadedimage

afterdelay:0

inmodes:@[Nsdefaultrunloopmode]];

• Limit optimization mode of picture loading: Fastimagecache

  Https://github.com/path/FastImageCache

Graphics performance This piece has what good idea also can propose to exchange a bit ~ ~

Reference:

• Https://lobste.rs/s/ckm4uw/a_performance-minded_take_on_ios_design/comments/itdkfh

• Advanced Graphics and animations for IOS Apps

• Http://iosinjordan.tumblr.com/post/56778173518/help-my-tables-dont-scroll-smoothly

Things to Optimize app performance (ii)