Download as PDF, PPTX
Uploaded byKyle Sherman
iOS Scroll Performance
The document outlines steps for diagnosing and improving scroll performance in iOS applications, emphasizing the importance of profiling on actual devices using Instruments. It covers analyzing frame rates, investigating CPU and GPU usage, and provides specific solutions for improving performance related to offscreen rendering and circular images. Concrete examples are given to illustrate how identified issues can be resolved to enhance the scrolling experience.
More Related Content
iOS Scroll Performance
- 1. iOS Scroll Performance Kyle Sherman LinkedIniOS Developer
- 2. Don’t just blamea technology (i.e. Autolayout)
- 3.
- 4. Step 1: UseInstruments to measure Scroll Performance
- 5. Rule #1: Always profileon 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.
- 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: Fixthe problem
- 17. GPU Issues • GPUIssues 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.
- 19. Step 5: RepeatSteps 2, 3, & 4 until satisfied
- 20. Which brings usto our concrete example…
- 21.
- 22. Applying the skillslearned from the previous part, we diagnose the issue(s)
- 23.
- 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 increasedvery slightly
- 26.
- 27. GPU Issues • Nowit 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.
- 29. Analysis • Every singlecircle is offscreen-rendered • There are tons of circles on the screen • Need a more performant way to make the circle
- 30. Test Hypothesis Turn offcircle creation
- 31. Yep! After remeasuring, scrolling isnow smooth. And look at Offscreen- Rendered now!
- 32.
- 33. Solution #1 • Inthe 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 inthis case Reason: Circles overlap
- 35. Solution #2 Retrieve circularimages from API
- 36. Valid solution, but… Addsto the number of images we serve (storage $$)
- 37. Solution #3 • Createa circular image mask and apply to the image • Perform on a background thread, so it doesn’t block UI thread
- 38.
- 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 highlyrecommend 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/