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 ...
Setting Up Instruments
• Hit Command-I to Profile
• Or Product -> Profile
• Or Hold down Play button;
select Profile
• After ...
Setting Up Instruments
• Hit Command-I to Profile
• Or Product -> Profile
• Or Hold down Play button;
select Profile
• After ...
Profiling
• Tip #1: Decrease sample rate
• Hit the Record Button
• Tip #2: Set flags using
Command-Down arrow
• Tip #3: Doub...
Profiling
• Tip #1: Decrease sample rate
• Hit the Record Button
• Tip #2: Set flags using
Command-Down arrow
• Tip #3: Doub...
Profiling
• Tip #1: Decrease sample rate
• Hit the Record Button
• Tip #2: Set flags using
Command-Down arrow
• Tip #3: Doub...
Profiling
• Tip #1: Decrease sample rate
• Hit the Record Button
• Tip #2: Set flags using
Command-Down arrow
• Tip #3: Sing...
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 u...
Step 3: Fix the
problem
GPU Issues
• GPU Issues require further
diagnosis
• Easiest way is to use Simulator
• Offscreen-Rendered is worst
performa...
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,
beca...
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 pip...
Color Offscreen-Rendered
On
Analysis
• Every single circle is
offscreen-rendered
• There are tons of circles on
the screen
• Need a more performant wa...
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 ma...
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...
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
• ...
Resources
• I highly recommend watching the WWDC video
mentioned. Maybe even a few times as it goes
into very good detail....
Próxima SlideShare
Cargando en…5
×

iOS Scroll Performance

8.772 visualizaciones

Publicado el

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.

Publicado en: Software, Móvil, Tecnología
2 comentarios
55 recomendaciones
Estadísticas
Notas
  • @Yan Zhang Sorry, I didn't see this comment earlier. Drawing a circle using Core Graphics will not trigger offscreen rendering. Also, you can move that drawing to a background thread as well to not block the main thread (UI). Without offscreen rendering, the cost is dramatically reduced.
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • I have a question about #solution1. The reason given in the slides is "circle overlap". However, drawing a mask with a circle inside also triggers offscreen rendering right? Isn't it expensive?
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
Sin descargas
Visualizaciones
Visualizaciones totales
8.772
En SlideShare
0
De insertados
0
Número de insertados
67
Acciones
Compartido
0
Descargas
86
Comentarios
2
Recomendaciones
55
Insertados 0
No insertados

No hay notas en la diapositiva.

iOS Scroll Performance

  1. 1. iOS Scroll Performance Kyle Sherman LinkedIn iOS Developer
  2. 2. Don’t just blame a technology (i.e. Autolayout)
  3. 3. Measure!
  4. 4. Step 1: Use Instruments to measure Scroll Performance
  5. 5. Rule #1: Always profile on device!
  6. 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. 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. 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. 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. 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. 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. 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. 13. Step 2: Analyze results
  14. 14. Examine Frame Rate • Examine the frame rate • Look at the CPU and GPU usage at and around large frame rate drops
  15. 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. 16. Step 3: Fix the problem
  17. 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. 18. Step 4: Measure Again!
  19. 19. Step 5: Repeat Steps 2, 3, & 4 until satisfied
  20. 20. Which brings us to our concrete example…
  21. 21. Performant Circular Images Concrete Example:
  22. 22. Applying the skills learned from the previous part, we diagnose the issue(s)
  23. 23. Problem Extremely Choppy Scrolling in this view
  24. 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. 25. Results Frame rate increased very slightly
  26. 26. Re-measure!
  27. 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. 28. Color Offscreen-Rendered On
  29. 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. 30. Test Hypothesis Turn off circle creation
  31. 31. Yep! After remeasuring, scrolling is now smooth. And look at Offscreen- Rendered now!
  32. 32. Solutions
  33. 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. 34. Doesn’t work in this case Reason: Circles overlap
  35. 35. Solution #2 Retrieve circular images from API
  36. 36. Valid solution, but… Adds to the number of images we serve (storage $$)
  37. 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. 38. Solution #3 (code) https://gist.github.com/drumnkyle/c2ae34ea2422514c45d5
  39. 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. 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/

×