#113: Profiling Core Animation 🏃📈


We covered how to analyze the performance of our app using the Time Profiler Instrument in Bite #68, now we'll take a look at how to do the same for how quickly our app draws its content to the device's display. Let's get started.

First, the basics: iOS wants to render content to the display 60 times per second. If our code can't keep up with that speed, some frames won't be drawn, and our app's UI will appear to lag and "skip" as things move around on screen. Even the slightest dip below 60 frames per second can make an app feel quite sluggish. One of the main places in our code this can be a challenge is when scrolling complex table and collection views. Let's look at how Instruments can help us identify and track down the cause of slow rendering views in our app:

We'll start Profiling like in Bite #68. When Instruments launches, we'll select the Core Animation Instrument and click Profile. Unlike before, we'll see two different gauges at the top of our screen.

We're starting to unlock some of the power of Instruments here. The Core Animation Instrument measures our app's rendering performance simultaneously with our code's performance. We'll scroll our table view for a bit then find a part of the graph where we dip below 60 fps. We'll drag to select it, then select the Time Profiler gauge. Now we can use the techniques we learned in Bite #68 to track down the offending slow function(s).

Now the really fun stuff: We can click the in the lower right-hand sidebar to show the Debug Options panel. These options alter how our app is drawn in real-time to help find problems. Here's a couple of the most helpful ones:

Color Blended Layers will tint views red that are being blended. Try to avoid non-opaque views or views with a clear background color.

Color Offscreen-Rendered Yellow will tint views that have been rendered twice - once on and once off-screen, yellow.

Remember, speed is a feature. Rendering speed is no different. Fast drawing means happy users!