1. iOS Scroll
Performance
Kyle Sherman
LinkedIn iOS Developer

2. Don’t just blame a
technology
(i.e. Autolayout)

3. Measure!

4. Step 1: Use Instruments
to measure Scroll
Performance

5. Rule #1: Always
profile on device!

6. 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 %

7. 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 %

8. 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 %

9. 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

10. 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

11. 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

12. 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

13. Step 2: Analyze
results

14. Examine Frame Rate
• Examine the frame rate
• Look at the CPU and GPU
usage at and around large
frame rate drops

15. 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

16. Step 3: Fix the
problem

17. 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

18. Step 4: Measure
Again!

19. Step 5: Repeat Steps
2, 3, & 4 until satisfied

20. Which brings us to our
concrete example…

21. Performant Circular
Images
Concrete Example:

22. Applying the skills learned
from the previous part, we
diagnose the issue(s)

23. Problem
Extremely Choppy Scrolling
in this view

24. 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

25. Results
Frame rate increased very slightly

26. Re-measure!

27. 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

28. Color Offscreen-Rendered
On

29. Analysis
• Every single circle is
offscreen-rendered
• There are tons of circles on
the screen
• Need a more performant way
to make the circle

30. Test Hypothesis
Turn off circle creation

31. Yep!
After remeasuring, scrolling
is now smooth.
And look at Offscreen-
Rendered now!

32. Solutions

33. 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

34. Doesn’t work in this
case
Reason: Circles overlap

35. Solution #2
Retrieve circular images from API

36. Valid solution, but…
Adds to the number of images we serve (storage $$)

37. Solution #3
• Create a circular image mask and apply to the
image
• Perform on a background thread, so it doesn’t
block UI thread

38. Solution #3 (code)
https://gist.github.com/drumnkyle/c2ae34ea2422514c45d5

39. 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

40. 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/