Graphics Performance across iOS Devices

Transcript

1. Smooth User Interfaces Graphics Performance across iOS device generations @floriankugler mail@floriankugler.com www.objc.io
2. Smooth User Interfaces Graphics performance in UIKit land Scroll views Table views Collection views
3. drawRect? In 2008 Loren Brichter said in an article about table view scrolling: »Cutting to the chase, here’s the secret: One custom view per table cell, and do your own drawing.« Does this still hold true today? TL;DR: No
4. Smooth Scrolling The iPhone 5 can handle a lot Previous device generations are more critical The iPad is more critical Especially collection views on the iPad can be a challenge Why?
5. What Makes Scrolling Smooth? 1. Bring new cells on screen within 1/60s (Drawing + Compositing) 2. Animate existing textures on screen at 60fps (Compositing) Each step has very different performance characteristics What makes drawing fast makes compositing slow We have to strike a balance between the two
6. Drawing UIView CALayer Backing Store Drawing means filling the backing store with RGB(a) values Drawing is CPU intensive Even drawing a straight line is a non-trivial task
8. Drawing The more pixels you draw the more you keep the CPU busy Screen improvements outperformed CPU improvements
9. iPhone CPU vs. Pixels iPhone 3GS iPhone 4 iPhone 4S iPhone 5 153.600 614.400 614.400 727.040
10. iPhone CPU/Pixel iPhone 3GS iPhone 4 iPhone 4S iPhone 5 More is better
11. iPad CPU vs. Pixels iPad iPad 2 iPad 3 iPad 4 786.432 786.432 3.145.728 3.145.728
12. iPad CPU/Pixel iPad iPad 2 iPad 3 iPad 4 More is better
13. Compositing After drawing the bitmap data gets uploaded to the GPU The GPU composites these textures into one coherent image Compositing of two non-opaque pixels: 0.5 0 0.5 RGB Value = 0 + 0 * (1 - 0.5) = 0 0 1 0.5
14. iPhone GPU/Pixel iPhone 3GS iPhone 4 iPhone 4S iPhone 5 More is better
15. iPad GPU/Pixel iPad iPad 2 iPad 3 iPad 4 More is better
16. Benchmarking
17. CPU vs. GPU bound Find the bottleneck in the display process CPU GPU
18. CPU vs. GPU bound Find the bottleneck in the display process CPU GPU
19. Benchmarking Scrolling with your finger is not the best benchmarking tool We want to test two steps separately Bringing the view on screen Animating the view screen
20. Benchmarking Drawing Use CADisplayLink to bring a cell on screen 60 times/s The display link gets called at 60fps refresh rate, less if drawing takes longer We also get the timestamp of the last refresh This enables accurate timing of how long drawing takes
21. Benchmarking Drawing CADisplayLink* displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(refresh:)]; [displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode]; counter = 0; previousTimestamp = displayLink.timestamp;
22. Benchmarking Drawing - (void)refresh:(CADisplayLink*)displayLink { counter++; if (counter > 60) { CGFloat timePerFrame = (displayLink.timestamp - previousTimestamp) / 60.0; NSLog(@"Time per frame: %f", timePerFrame); previousTimestamp = displayLink.timestamp; counter = 0; } [self bringTheViewOnScreen]; }
23. Benchmarking Animation Bring an appropriate number of cells on screen Use CADisplayLink to change the views’ transform - (void)animateViews { CGFloat position = self.randomNumber * 50 - 25; containerView.transform = CGAffineTransformMakeTranslation(position, position); } Measure frame rate with Core Animation Instrument
24. Example Time Typical table view cell Starring: Lucy, the sheep! Gradient Image Labels
25. Bringing a Cell on Screen iPhone (Time per view in milliseconds – less is better) iPhone 3GS iPhone 4 iPhone 4S iPhone 5 4,5 8 10,7 5,9 1,7 2,7 4,8 6,2 UIView hierarchy drawRect: 16ms
26. iPad (Time per view in milliseconds – less is better) iPad mini iPad 3 iPad 4 4,15 9,3 2,85 1,69 3 2,6 UIView hierarchy drawRect: Bringing a Cell on Screen
27. Animating Cells on Screen iPhone (# of views at 60fps – more is better) iPhone 3GS iPhone 4 iPhone 4S iPhone 5 500 390 130 75 70 58 15 20 UIView hierarchy drawRect:
28. iPad (# of views at 60fps – more is better) iPad mini iPad 3 iPad 4 580 380 360 45 30 60 UIView hierarchy drawRect: Animating Cells on Screen
29. Animating Cells on Screen layer.shouldRasterize Renders the layer as a bitmap before compositing it to its destination Cached bitmap is reused in seubsequent frames Imposes a one time performance hit per layer Can make performance much better or way worse
30. Gradients Image Works only if the size is fixed (scaling is expensive!) Don’t draw the image, use an image view or set it as a layer’s contents CAGradientLayer Offloads the CPU and creates the gradient on the GPU Core Graphics Drawing gradients with Core Graphics is CPU intensive
31. Gradients Image CAGradientLayer Core Graphics 3,8 0,3 0,3 4,3 1,5 1,1 iPhone 3GS iPhone 5 (Time to bring on screen in milliseconds - less is better)
32. Gradients Image CAGradientLayer Core Graphics 3,6 0,28 0,27 2,23 0,5 0,48 iPad 2 iPad 4 (Time to bring on screen in milliseconds - less is better)
33. Rounded Corners cornerRadius Causes off-screen rendering path Layer mask For example CAShapeLayer Creating the mask is CPU intensive, cache it Drawing with clipping mask Avoids off-screen rendering Drawing is CPU intensive
34. Rounded Corners cornerRadius Layer Mask Cached Layer Mask CG Clipping Mask 2 0,295 0,51 0,31 (Time to bring on screen in milliseconds - less is better)
35. Text Text is always rendered by the CPU No major performance difference between string drawing and using labels String drawing reduces compositing load on GPU
36. Conclusion Measure, measure, measure Distinguish between bringing a new view on screen and animating existing views We’re more likely to be CPU bound on iPhone @2x screens On the iPad it depends – being GPU bound is still a possibility Composite views/layers if you’re not GPU bound Only go to drawRect: if compositing becomes the limiting factor
37. Thanks for your attention! Have a good lunch :) @floriankugler mail@floriankugler.com www.objc.io