iOS Scroll Performance
•
89 likes•26,738 views
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.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to iOS Scroll Performance
Similar to iOS Scroll Performance (20)
Recently uploaded
Recently uploaded (20)
iOS Scroll Performance
- 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
- 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
- 19. Step 5: Repeat Steps 2, 3, & 4 until satisfied
- 20. Which brings us to our 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
- 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
- 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/