SlideShare a Scribd company logo
iOS Scroll
Performance
Kyle Sherman
LinkedIn iOS Developer
Don’t just blame a
technology
(i.e. Autolayout)
Measure!
Step 1: Use Instruments
to measure Scroll
Performance
Rule #1: Always
profile on device!
Setting Up Instruments
• Hit Command-I to Profile
• Or Product -> Profile
• Or Hold down Play button;
select Profile
• After done building (long
time), select Core Animation
• Turn on Device Utilization %
Setting Up Instruments
• Hit Command-I to Profile
• Or Product -> Profile
• Or Hold down Play button;
select Profile
• After done building (long
time), select Core Animation
• Turn on Device Utilization %
Setting Up Instruments
• Hit Command-I to Profile
• Or Product -> Profile
• Or Hold down Play button;
select Profile
• After done building (long
time), select Core Animation
• Turn on Device Utilization %
Profiling
• Tip #1: Decrease sample rate
• Hit the Record Button
• Tip #2: Set flags using
Command-Down arrow
• Tip #3: Double click flag to
name it
Profiling
• Tip #1: Decrease sample rate
• Hit the Record Button
• Tip #2: Set flags using
Command-Down arrow
• Tip #3: Double click flag to
name it
Profiling
• Tip #1: Decrease sample rate
• Hit the Record Button
• Tip #2: Set flags using
Command-Down arrow
• Tip #3: Double click flag to
name it
Profiling
• Tip #1: Decrease sample rate
• Hit the Record Button
• Tip #2: Set flags using
Command-Down arrow
• Tip #3: Single click flag to
name it
Step 2: Analyze
results
Examine Frame Rate
• Examine the frame rate
• Look at the CPU and GPU
usage at and around large
frame rate drops
Examine Frame Rate
• If Render/Device utilization is
high, requires more
investigation (details later)
• If not, and CPU usage is high:
• Click Time Profiler so CPU
usage is highlighted
• Drag around peak
• Look at heaviest stack trace
Step 3: Fix the
problem
GPU Issues
• GPU Issues require further
diagnosis
• Easiest way is to use Simulator
• Offscreen-Rendered is worst
performance hit (details to
come)
• Watch WWDC 2014 Session
419: Advanced Graphics and
Animations for iOS Apps
Step 4: Measure
Again!
Step 5: Repeat Steps
2, 3, & 4 until satisfied
Which brings us to our
concrete example…
Performant Circular
Images
Concrete Example:
Applying the skills learned
from the previous part, we
diagnose the issue(s)
Problem
Extremely Choppy Scrolling
in this view
Analyzing The Data
• Both the GPU utilization was high and CPU was
spiking
• I decided to investigate CPU usage first,
because it was possibly simpler to understand
• Saw suspicious methods and fixed issues in
code
Results
Frame rate increased very slightly
Re-measure!
GPU Issues
• Now it was time to resolve the GPU issues
• After watching WWDC 2014 Session 419,
learned about rendering pipeline and how bad
offscreen rendering is
• The following is a screenshot with Color
Offscreen-Rendered turned on
Color Offscreen-Rendered
On
Analysis
• Every single circle is
offscreen-rendered
• There are tons of circles on
the screen
• Need a more performant way
to make the circle
Test Hypothesis
Turn off circle creation
Yep!
After remeasuring, scrolling
is now smooth.
And look at Offscreen-
Rendered now!
Solutions
Solution #1
• In the WWDC session, Apple
suggests creating a mask like
the figure to the left of the
canvas
• Create the mask by drawing a
circle inside of a square of the
same size of the image
• Only fill outside of the circle
• The fill color of the mask must
be the same as the view (white
in this case)
• Place this mask on top of the
image (as a subview)
Image
Doesn’t work in this
case
Reason: Circles overlap
Solution #2
Retrieve circular images from API
Valid solution, but…
Adds to the number of images we serve (storage $$)
Solution #3
• Create a circular image mask and apply to the
image
• Perform on a background thread, so it doesn’t
block UI thread
Solution #3 (code)
https://gist.github.com/drumnkyle/c2ae34ea2422514c45d5
Solution #3 Tips
• Only do it once per image if possible
• You can process when image downloads or first
time it is used
• Add a circular version of the image to your
cache
Resources
• I highly recommend watching the WWDC video
mentioned. Maybe even a few times as it goes
into very good detail.
• Apple TV tech talks video Tuning your tvOS
Apps, also goes over these topics
https://developer.apple.com/videos/play/wwdc2014-419/
https://developer.apple.com/videos/play/techtalks-apple-tv/9/

More Related Content

iOS Scroll Performance