To understand the graphic performance tuning, we would need to review the Layers.

Concept: Layer is basically a graphical object (type CGLayerRef), that you want to reuse.
Reason: Quartz will cache the Layer (in according way of the context – type CGContextRef) so that it’s much faster than similar bitmap image!  Layer inherits all attributes of graphics context, including the color space, size, resolution, and pixel format.
Usage: If you need to draw something again and again, draw it on a layer, then draw the layer again and again. If you need to draw just once, then just draw directly on screen.
 

Sample Code (to draw a star): 15. create layer, 16. get context, 17. fill context, 18. draw lines, 19. fill lines

CGLayerRef starLayer = CGLayerCreateWithContext (context, starField.size, NULL);// 15
CGContextRef myLayerContext2 = CGLayerGetContext (starLayer);// 16
CGContextSetRGBFillColor (myLayerContext2, 1.0, 1.0, 1.0, 1);// 17
CGContextAddLines (myLayerContext2, myStarPoints, 10);// 18
CGContextFillPath (myLayerContext2); //19

Code to draw those Layers:

CGContextSaveGState(context);  // Saves the graphics state of the windows graphics context
for (i=0; i< 5;  i++)   // draw 5 stars
{
  CGContextDrawLayerAtPoint (context, CGPointZero, starLayer);// draw 1 star
  CGContextTranslateCTM (context, 0.0, vertical_spacing);// move to new position
}
CGContextRestoreGState(context); // Restore the graphics state

Transparency layer: painting requires three steps:

  1. Call the function CGContextBeginTransparencyLayer.
  2. Draw the items you want to composite in the transparency layer.
  3. Call the function CGContextEndTransparencyLayer.

Sublayers

 

“Just like UIViews can have subviews, CALayers can have sublayers as well”. You can create a new CALayer very easily with the following line of code:

CALayer *sublayer = [CALayer layer];

Before adding a sublayer, we have to specify frame

CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor blueColor].CGColor;
sublayer.shadowOffset = CGSizeMake(0, 3);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 0.8;
sublayer.frame = CGRectMake(30, 30, 128, 192);
[self.view.layer addSublayer:sublayer];

It’s so easy to add image content to layer:

sublayer.contents = (id) [UIImage imageNamed:@“BattleMapSplashScreen.jpg”].CGImage; sublayer.borderColor = [UIColor blackColor].CGColor;

 

Optimising Tableview performance

 

According to this article:

Animation problems fall into one of those two phases in the pipeline. Either the GPU is being taxed by expensive operations, or the CPU is spending too much time preparing the cell before handing it off to the GPU.

  1. GPU bottle neck
    • Avoid blending
    • Use direct drawing
    • check pixel-alignment (use floor/ceil to avoid anti-aliasing, which is expensive)
  2. Cell Preparation bottleneck (17 milliseconds for content)
    • Recycle (dequeueReusableCellWithIdentifier)
    • Optimize drawRect
    • Pre-render as CGImage

Advanced Tableview Animation

 

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, while multiple view layers that are drawn without blending are highlighted in green. Reduce the amount of red in your app when this option is selected to dramatically improve your app’s performance. Blended view layers are often the cause of slow table scrolling.
Color Copied Images Places a blue overlay over images that are copied by Core Animation in blue.
Color Misaligned Images Places a magenta overlay over images whose bounds are not aligned to the destination pixels. If there is not a magenta overlay, places yellow overlay over images drawn with a scale factor.
Color Off Screen Rendered Places a yellow overlay on content that is rendered offscreen.
Location Allows you to set the Core Location to be used by your app. Choose from the different location settings:

  • None. Does not return a location. Use for testing how an app responds when no location data is available.
  • Custom Location. Allows use of a custom latitude and longitude.
  • Apple Stores. Uses the coordinates for an Apple Retail Store.
  • Apple. Uses the coordinates of the Apple Headquarters.
  • City Bicycle Ride. Simulates a bike ride in Cupertino, CA. This option simulates the device moving on a predefined route.
  • City Run. Simulates a run in Cupertino, CA. This option simulates the device moving on a predefined route.
  • Freeway Drive. Simulates a drive through Cupertino, CA. This option simulates the device moving on a predefined route.

Color-blended-layers: Basically blending (transparent or semi-transparent color drawn upon other colors) takes time. Removing blending can improve performance a lot – using this:

Because the cell background is a flat color, we can save unnecessary calculation by setting the label to be opaque and the backgroundColor to the same color as the cell background!

Conclusion:

  1. Use transparent and semi-transparent layers/views as least as possible, as blending is costly.
  2. Use CALayer instead of UIView, as the overhead of wrapping UIView around CALayer is taking toll.

 

Performance Measurement 

 

Smooth table view scrolling has two ingredients:

  1.  First you need to be able to bring a new table view cell on screen within 1/60 of a second (that’s approximately 16ms, in case of really fast scrolling it might also be more than one cell). This involves CPU & GPU.
    • iphone-view-creation-bars
  2. Second, you need to be able to move the cells which are already on screen around at 60 frames per second. This relies mainly on the GPU (if you are not changing cells which are already on screen)
    • iphone-view-animation-bars
Test subject: 
  1. The first version (UIView tree) was constructed with several subviews. One for the gradient, an UIImageView for the image and two UILabels for the text.
  2. The second version (CALayer tree) was constructed out of several sublayers. A CAGradientLayer for the background gradient, a CALayer for the image with itscontents property set to a CGImageRef and two CATextLayers.
  3. The last version (flat CoreGraphics) was drawn as flat texture with Core Graphics.
Conclusion: Flat CoreGraphics is good in scrolling as it is a single layer. However in animation when just some object changes, then definitely you don’t want to draw everything again for the new frame. Then CALayer is the way to go.  

 

Apple Instrument Guide

 

http://robots.thoughtbot.com/designing-for-ios-graphics-performance

 

Advertisements