Timering

Purp

Blender Test + UITableView Scroll Performance - Instruments tutorial Part 4 - Profile Performance - Graphics Performance, Core Animation

In this tutorial I show some Performance steps, which should always be done before you upload your App in iTunes. The most common Problem is the UITableView scroll, but at every Application should be used Blender Test (at least Color Blended Layers and Color Misaligned Images debug options) and optimise images, sizes, frames, and after that with Instruments Allocation template should check the codes.

First of all you should check in Xcode, that your App memory increases or not if you leave a ViewController. If there is no big difference, than you can work toward, but it's easier to check it after every Screen what you have already created, as just at the end of the Project. You will see at Allocation test, with Mark Generation, that a huge difference if you can reach 0 kb rest after left the screen. 

I made a basic BlenderTest Xcode Project with a FirstView with 1 Button which call the SecondViewController included a TableView with custom Cell ContentViews.

Steps

  1. Download the Test Project, or create a basic TableView App as you can see in the video
  2. Use Simulator for Blender Test or Instruments Core Animation template
  3. Debug menu - Color Blended Layer menu
  4. Do the changes!
  5. Run your Application: Debug menu - Color Misaligned Images menu
  6. Do the changes & check your Cell dataSource too!
  7. Use Allocation template at Instruments

Part of the series

  1. Instruments tutorial Part 1 - Profiling templates, deferred mode, launch instruments
  2. Instruments tutorial Part 2 - Navigate Timeline Pane, Detail Pane, Hide System Library
  3. Instruments tutorial Part 3 - Profile Performance - Time Profiler - CPU Usage
  4. Instruments tutorial Part 5 - Profile Performance - Monitor NetWork - Network
  5. Instruments tutorial Part 6 - Profile Memory - Activity Monitor
  6. Instruments tutorial Part 7 - Profile Memory - Allocations
  7. Instruments tutorial Part 8 - Profile Memory - Leaks
  8. Instruments tutorial Part 9 - Profile Memory - Zombies
  9. Instruments tutorial Part 10 - Profile Energy - Energy Impact
  10. Instruments tutorial Part 11 - Create Custom Instrument
  11. Instruments tutorial Part 12 - Automate UI Testing

Video

You can reach a more fast App, if you check it in Simulator with Blender Test. This is awesome. You can see if, there is an image which is transparent which means more memory usage, or you can check, if the frames and sizes  don't match. 

You can use Blender Test in Instrument Core Animation template, but just on a real IOS Device. There you can select these, as debug options.

color_blended_layer_instruments

Basically as Instruments User Guide says:

"Extensive use of graphics in your iOS app can make your app stand out from your competitors. But unless you use graphics resources responsibly, your app will slow down, reduce battery life, and look mediocre no matter how good the content you are trying to render. For optimal graphic performance:

  • Ensure that the frame rate of animations is sufficient for providing a fluid visual experience without negatively impacting app performance.
  • Reduce the number of views your app uses.
  • Reduce the use of opacity, such as in views that exhibit a translucent blur. If you need to use opacity, avoid using it over views that are updated frequently. Otherwise, energy cost is magnified, as both the background view and the translucent view must be updated whenever content changes.
  • Draw to smaller portions of the screen—only the portions that are changing. To do this, use needsToDrawRect: or getRectsBeingDrawn:count: to identify the specific area to update, and pass the result to drawRect:.
  • Eliminate drawing when your app or its content is not visible; for example, when your app is in the background, or when its content is obscured by other views, clipped, or offscreen.
  • Eliminate drawing during window resizing." 

You can test these thing with different colors. But what you have to always: Color Blended Layers and Color Misaligned Images!

  • Color Blended Layers. Shows blended view layers. Multiple view layers that are drawn on top of each other with blending enabled are highlighted in red. Reducing the amount of red in your app when this option is selected can dramatically improve your app’s performance. Blended view layers often cause slow table scrolling.
  • Color Hits Green and Misses Red. Marks views in green or red. A view that is able to use a cached rasterization is marked in green.
  • Color Copied Images. Shows images that are copied by Core Animation in blue.
  • Color Immediately. Removes the 10 ms delay when performing color-flush operations.
  • Color Misaligned Images. Places a magenta overlay over images where the source pixels are not aligned to the destination pixels.
  • Color Offscreen-Rendered Yellow. Places a yellow overlay over content that is rendered offscreen.
  • Color OpenGL Fast Path Blue. Places a blue overlay over content that is detached from the compositor.
  • Flash Updated Regions. Colors regions on your iOS device in yellow when those regions are updated by the graphics processor.

v

1. Run your Application: Debug menu - Color Blended Layer menu

Your screen will green where the layer are ok, and will turn in red where there are some problems. This problem is usually not the multiple view layers, rather the transparency. 

How you can solve it?

  • tick opaque at ImageViews and other UIViews in Storyboard
  • export png with background from Sketch! designers have to prepare images with background at png, because it has alpha channel!
  • add background Color to UILabel, UIButton and other elements. Sometimes useful to set background color at the Title of the Button too. 

color blended layer red uiimage transparency png background

In my Tutorial Video I changed the play_icon image which was exported without background form Sketch to play_icon_2, which has background. And I have already added white background Color to my UILabels in the cells. 

2. Run your Application: Debug menu - Color Misaligned Images menu

Your screen will show magenta views, where source pixels are not aligned to destination pixels. And it will show yellow, if you have a subview which size usually an image size not fit to the other view size/frame, therefore it stretches. So magenta = pixels, yellow=stretch.

How you can solve it?

at magenta - pixel problem use

  • before CGRectMake CGRectIntegral, it returns the smallest rectangle that results from converting the source rectangle values to integers
  • at float values use ceilf, which is a function that returns a mathematical ceiling of a float value

at yellow - stretch problem:

  • just log out your frame, and check if it fits to the Image size or not. 

But you can use Reveal too, to check stretches and pixels. 

color misaligned images layer yellow magenta pixel stretch cgrectintegral

These some steps can boost your App, it will be faster, and you can reach a better user experience. 

3. UITableView Scroll - Memory increase

As n the Instruments User Guide you could read it, the multiple layers and transparency could cause memory issue at UITableView scroll. So with these checks, your App should not reach so much memory. But as you can see in my video Tutorial, my App needed double memory at scroll after these performance updates too. 

What I had to do more, to reach a great scroll performance?

I changed the UITableView datasource method. As you know, if you use storyboard TableView with ProtoypeCell, and in the code dequeueReusableCellWithIdentifier, you shouldn't use the "if(!cell"){" statement. But my experience is, if you use programmatically created views in your cell.contentview, you should!

You should:

  • change the CellIdentifier name, or delete the identifier from storyboard, so the CellIdentifier should be another one
  • create frames, allocate views and using any drawing action in if (!cell){} block! 
  • use cell.layer.shouldresterize=YES  and cell.layer.rasterizationscale=[UIScren mainscreen].scale in if (!cell){} block!
  • use cell.contentview viewWithTag method to identify a Label or other View out of the block! - usually it needs at Custom UITableViews.

After these changes my tutorial video at scrolling 10 cells, the memory finally decreased  and doesn't reach 40 MB anymore, just 27-28 MB. 

4. Allocation template Instruments

I suggest always the Instruments Allocation template, where you can click the same button 8-10 times, and always mark generation, so finally you can see, what stayed in memory after the action, which code needs more force. So you can use @autorelasepool or just nil some elements, till you achieve the 0 KB at Mark Generation. (You should mark 8-10 times, and you will see 0 KB at 5th or 6th one...). But this is another tutorial. 

allocation instruments test

Next

 The next part of the series: Instruments tutorial Part 5 - Profile Performance - Monitor NetWork - Network

Share & Follow

If you would like to be notified of my new solutions, please subscribe to my Newsletter or my youtube channel and/ or follow me on Facebook or Twitter! Check Footer section for these opportunities!