Measuring Graphics Performance on Your iOS Device

Extensive use of graphics in your iOS app can make your app stand out from your competitor. But unless you use graphics resources responsibly, your app will slow down and look mediocre no matter how good the images you are trying to render.

Use the trace templates outlined in this section to profile your app. Ensure that the frame rate is high enough and that your graphics don’t impede your app’s performance.

Measuring Core Animation Graphics Performance in iOS with the Core Animation trace template

Instruments uses the Core Animation instrument to measure an app’s graphical performance on an iOS device. The Core Animation trace template provides a quick and lightweight starting point for using this instrument, allowing you to measuring the number of frames per second rendered by your app. It allows you to quickly see where your app renders fewer than expected frames. By correlating what you were doing at the time the sample was taken, you can then identify areas of your code that need to be improved.

Correlate your interactions with your app with the results displayed in Instruments

In Figure 9-1, you can see spikes where the frame rate of the app becomes appreciably better. Without knowing what was happening with the device during these spikes, it would be natural for you to want to duplicate these higher frame rates throughout the app. However, these spikes were caused by orientation changes when the device was changed between landscape and normal orientation. Without knowing that an orientation change by the device was performed, you might spend time trying to find what caused the performance increase and replicating it throughout your app.

Figure 9-1  Core Animation trace template showing frame rate spikes

Debugging options

Core Animation contains several useful debugging options, which can be enabled/disabled in the Display Settings area in the inspector sidebar. You do not need to be running a trace in order to see these options working on your iOS device.

  • 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 apps performance. Blended view layers are often the cause for 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. When selected, 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 that region is updated by the graphics processor.

Measuring OpenGL Activity in iOS with the OpenGL ES Analysis Trace Template

The OpenGL ES Analysis template measures and analyzes OpenGL ES activity in order to detect OpenGL ES correctness and performance problems. It also offers you recommendations for addressing found problems. It consists of the OpenGL ES Analyzer and the GPU Driver instruments.

bullet
To get OpenGL ES Analyzer to make suggestions for your app
  1. Create a new trace document in Instruments using the OpenGL ES Analysis template. At the top of the template selection window, choose the device and app you want to analyze. Or, you can choose a target device and app from the trace document’s toolbar, once it is created.

    ../Art/instruments_opengl_es_analysis_template_2x.png
  2. Click the Record button, and exercise your OpenGL ES graphics code in your app.

  3. After a few seconds of measurement, click the Stop button and wait for issues to stop accumulating in the detail pane.

    ../Art/instruments_opengl_es_analysis template_profiling_2x.png

Errors are listed in the detail pane sorted by their severity. Red squares are used for “most severe” problems, and orange triangles are used for “less severe” problems. A recommendation and the stack trace are displayed in the Extended Detail inspector pane for the issue selected in the detail pane.

Finding Bottlenecks in an iOS app with the GPU Driver Trace Template

The GPU Driver trace template is also used to measure app performance and provides you with more information than just the number of frames per second that your app renders. The detail pane displays all of the gathered information for a specific sample. Select a row of data to view its statistics in the Extended Detail inspector.

Figure 9-2  Detailed information for a GPU Driver sample

The individual statistics displayed in the track pane can be enabled/disabled by adjusting the GPU Driver instrument’s Record Settings in the inspector sidebar.

../Art/instruments_gpu_driver_statistics_2x.png

Bottlenecks for an OpenGL app often come in two forms, a GPU bottleneck or a CPU bottleneck. GPU bottlenecks occur when the GPU forces the CPU to wait for information as it has to much information to process. CPU bottlenecks often occur when the GPU has to wait for information from the CPU before it can process it. CPU bottlenecks can often be fixed by changing the underlying logic of your app to create a better overall flow of information to the GPU. The following shows a list of bottlenecks and common symptoms that point to the bottleneck: