Responsive UI for iOS Apps

How to build fast and responsive UI for you application.

Transcript

1. Responsive UI Vitalii Topoliuk
2. Application Core Animation Render server Core Animation GPU Display
3. Application Core Animation Render server Core Animation GPU Display 16.67 ms
4. Application Core Animation Render server Core Animation GPU Display Handle events 16.67 ms
5. Application Core Animation Render server Core Animation GPU Display Commit Transaction 16.67 ms
6. Application Core Animation Render server Core Animation GPU Display Decode 16.67 ms
7. Application Core Animation Render server Core Animation GPU Display Draw Calls 16.67 ms
8. Application Core Animation Render server Core Animation GPU Display Render 16.67 ms
9. Application Core Animation Render server Core Animation GPU Display Display 16.67 ms
10. Application Core Animation Render server Core Animation GPU Display 16.67 ms
11. CPU bound vs GPU bound
12. CPU bound vs GPU bound • Creating views • Layout views • CGContext drawing • Image decoding
13. CPU bound vs GPU bound • Creating views • Layout views • CGContext drawing • Image decoding • Offscreen rendering • Count of views/layers • Shapes/Shadow/Effects
15. • Buttons ! !
16. • Buttons • Text !
17. • Buttons • Text • Images
18. • Buttons • Text • Images • Container Views
19. Collecting data
20. • Drops over 50ms f.e. Collecting data
21. • Drops over 50ms f.e. • Usually when new cell appears Collecting data
22. • Drops over 50ms f.e. • Usually when new cell appears • Can be easily tracked with CADisplayLink Collecting data
23. Profiling with instruments
24. event = 550; syscall(SYS_kdebug_trace, APPSDBG_CODE(DBG_MACH_CHUD, event) | DBG_FUNC_NONE, arg1, arg2, arg3, arg4); Profiling with instruments
25. Profiling with instruments
26. Profiling with instruments
27. Profiling with instruments
28. Tips & Tricks
29. Tips & Tricks • Preloading next rows • Simple views/layers hierarchy (backboardd!!!) • view.hidden vs add/removeFromSuperview: • Using CALayer instead of UIView • Image decoding in background • Caching layers (only x2.5 screen sizes!)
30. Tips & Tricks • Preloading next rows • Simple views/layers hierarchy (backboardd!!!) • view.hidden vs add/removeFromSuperview: • Using CALayer instead of UIView • Image decoding in background • Caching layers (only x2.5 screen sizes!)
31. Tips & Tricks
32. Tips & Tricks • Preloading next rows • Simple views/layers hierarchy (backboardd!!!) • view.hidden vs add/removeFromSuperview: • Using CALayer instead of UIView • Image decoding in background • Caching layers (only x2.5 screen sizes!)
33. Tips & Tricks • Preloading next rows • Simple views/layers hierarchy (backboardd!!!) • view.hidden vs add/removeFromSuperview: • Using CALayer instead of UIView • Image decoding in background • Caching layers (only x2.5 screen sizes!)
34. Tips & Tricks • Preloading next rows • Simple views/layers hierarchy (backboardd!!!) • view.hidden vs add/removeFromSuperview: • Using CALayer instead of UIView • Image decoding in background • Caching layers (only x2.5 screen sizes!)
35. Tips & Tricks • Preloading next rows • Simple views/layers hierarchy (backboardd!!!) • view.hidden vs add/removeFromSuperview: • Using CALayer instead of UIView • Image decoding in background • Caching layers (only x2.5 screen sizes!)
36. Tips & Tricks • Don’t use UILabel with NSAttributedString • All size calculations in background • Sometimes UIButton is very expensive • Use stretchable images where possible • Use 4 separated stretchable images for outlines • Avoid offscreen rendering
37. Tips & Tricks
38. Tips & Tricks • Don’t use UILabel with NSAttributedString • All size calculations in background • Sometimes UIButton is very expensive • Use stretchable images where possible • Use 4 separated stretchable images for outlines • Avoid offscreen rendering
39. Tips & Tricks • Don’t use UILabel with NSAttributedString • All size calculations in background • Sometimes UIButton is very expensive • Use stretchable images where possible • Use 4 separated stretchable images for outlines • Avoid offscreen rendering
40. Tips & Tricks
41. Tips & Tricks • Don’t use UILabel with NSAttributedString • All size calculations in background • Sometimes UIButton is very expensive • Use stretchable images when possible • Use 4 separated stretchable images for outlines • Avoid offscreen rendering
42. Tips & Tricks • Don’t use UILabel with NSAttributedString • All size calculations in background • Sometimes UIButton is very expensive • Use stretchable images when possible • Use 4 separated stretchable images for outlines • Avoid offscreen rendering
43. Tips & Tricks
44. Tips & Tricks
45. Tips & Tricks UIImage* image = [shadowImage resizableImageWithCapInsets:10];
46. Tips & Tricks UIImage* image = [shadowImage resizableImageWithCapInsets:10];
47. Tips & Tricks UIImage* image = [shadowImage resizableImageWithCapInsets:10];
48. Tips & Tricks
49. Tips & Tricks
50. Tips & Tricks • Don’t use UILabel with NSAttributedString • All size calculations in background • Sometimes UIButton is very expensive • Use stretchable images when possible • Use 4 separated stretchable images for outlines • Avoid offscreen rendering
51. Tips & Tricks • Avoid offscreen rendering • Cropping layers by mask, shadows • Each GC switch takes 0.2ms • 3 CG switches for rounded corners = 0.6ms • For 10 rows = 6ms
52. Tips & Tricks • Don’t use UILabel with NSAttributedString • All size calculations in background • Sometimes UIButton is very expensive • Use stretchable images when possible • Use 4 separated stretchable images for outlines • Avoid offscreen rendering • Avoid Autolayout usage
53. Tips & Tricks
54. Tips & Tricks
55. Tips & Tricks • Flatting view hierarchy in background • Simplified view hierarchy => low backboardd • Doesn’t block main thread • Only for static parts of cell
56. Tips & Tricks • Use QoS from iOS 8 • Or implement your own • LOW, HIGH, and DEFAULT queues are almost the same (priorities 28, 30, 32) • Main thread has priority about 40-45 • backboardd priority is about 50
57. Chisel https://github.com/facebook/chisel
58. Demo
59. How it works?
60. How it works? • LLDB Python bridge
61. How it works? • LLDB Python bridge • expr (void)[CATransaction flush]
62. Q & A
63. Vitalii Topoliuk vitalii@fb.com