The Amazing Race: Performance of Standard iOS Elements and Technologies

We all know that autolayout comes with a performance hit, but how does it really compare to manual layout, especially with the improvements to the autolayout engine in iOS 12? And what’s a performant way to round the corners of an image? CoreText, UILabel, UITextView: how do all the different ways to draw text perform against each other? Let's discuss the performance differences between comparable iOS elements and technologies.

Transcript

1. The Amazing Race: Performance of Standard iOS Elements and Technologies By Janina Kutyn
2. In this talk Text Rounded corners Shadows Layout
3. First, a little theory UIKit CoreAnimation CoreGraphics . . . Hardware
4. 1001 ways to draw text
5. Text UILabel UITextView CATextLayer CoreText TextKit
6. 1) UILabel
7. 2) UITextView
8. 3) CATextLayer
9. 4) CoreText
10. 5) TextKit https://github.com/KyoheiG3/AttributedLabel
11. TextKit, huh? https://www.raywenderlich.com/2257-text-kit-tutorial-getting-started
12. Measuring Performance Always test on device instead of the simulator! iPhone X, iOS 11 Repeat testing Find average result
13. Baseline UIView Time in Milliseconds 0 1 0,88
14. Execution time UITextView UILabel TextKit CATextLayer CoreText Time in Milliseconds 0 6 12 18 24 30 1,77 2,55 3,43 4,39 27,4
15. Execution time CATextLayer CATextLayer + View UILabel Time in Milliseconds 0 1 2 3 4 5 4,39 4,25 2,55
16. rounded corners: so basic
17. Rounded Corners CALayer + cornerRadius CALayer + mask CoreGraphics
18. 1) CALayer
19. 1b) CALayer
20. 2) CALayer + Bezier Path
21. 3) CoreGraphics
22. Execution time CoreGraphics CALayer + clipsToBounds CALayer + mask CALayer + masksToBounds Time in Milliseconds 0 1 2 3 1,41 1,66 1,91 2,4
23. Note: shouldRasterize
24. Execution time CALayer + masksToBounds + shouldRasterize Time in Milliseconds 0 1 2 3 2,3 1,41
25. shadows: so are they cool or not?!
26. Shadows CALayer CoreGraphics UIImage
27. 1) CALayer
28. 1b) CALayer + shadowPath
29. 2) CoreGraphics
30. 3) UIImage
31. Execution time UIImage CALayer CoreGraphics CALayer + shadowPath Time in Milliseconds 0 2 4 6 8 10 2,14 2,33 3,34 9,82
32. rounded corners + shadows: you think it’d be easy but it’s not
33. Rounded Corners + Shadows Shadow as UIView CAShapeLayer CoreGraphics
34. 1) Shadow as UIView
35. 2) CAShapeLayer
36. 3) CoreGraphics
37. Execution time Subview CoreGraphics CAShapeLayer Time in Milliseconds 0 1 2 3 2,1 2,42 3,1
38. I’m noticing a trend… CALayer CoreGraphics UIKit
39. CoreGraphics Rounded Corners Shadow Rounded Corners + Shadow Time in Milliseconds 0 1 2 3 2,42 2,33 2,4
40. AutoLayout? more like AutoDELAYout
41. Layout AutoLayout UIStackView Manual
42. 1) AutoLayout
43. 2) UIStackView
44. 3) Manual Layout
45. Execution time AutoLayout UIStackView Manual Layout AutoLayout iOS 12 Time in Milliseconds 0 2,8 5,6 8,4 11,2 14 6,65 1,7 12 14
46. Final Thoughts UIKit elements have overhead CoreGraphics vs CoreAnimation AutoLayout always slower than manual Up to you to choose what meets your needs
47. Thank you!