This presentation by Kyle Sherman, LinkedIn iOS Developer for the SlideShare iOS app, goes over fixing issues with jittery scroll performance in iOS applications. The presentation goes over the basics of using Instruments to measure and fix problems, tips for using Instruments, and a concrete example from the new LinkedIn iOS flagship application.

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/