Save 37% off PRO during our Black Friday Sale! »

UI Rendering в iOS - Михаил Сорокин, Citymobil

5d08ba0cd07942f2ddbf82e5b21ba5e7?s=47 FunCorp
February 15, 2020

UI Rendering в iOS - Михаил Сорокин, Citymobil

5d08ba0cd07942f2ddbf82e5b21ba5e7?s=128

FunCorp

February 15, 2020
Tweet

Transcript

  1. iOS Rendering Михаил Сорокин @mick_sn 1

  2. 2

  3. 10 FPS 3

  4. Agenda 1. Render pipeline 2. Images and downsampling 3. Drawing

    4.Performance issues 4
  5. CPU vs GPU 5

  6. UIKit Core Graphics Core Animation Metal Hardware 6

  7. UIKit Core Graphics Core Animation Metal Hardware 7

  8. App Core Animation Frame buffer 8

  9. Image Draw Rect Background Color 9

  10. 10

  11. 11

  12. 12

  13. Event 16.67 ms App 13

  14. Event Commit transaction 16.67 ms App 14

  15. Layout CATransaction 15

  16. Layout Display CATransaction 16

  17. Layout Display Prepare CATransaction 17

  18. Layout Display Prepare Commit CATransaction 18

  19. Event Commit transaction 16.67 ms App Render Server 19

  20. Event Commit transaction Decode 16.67 ms App Render Server 20

  21. Event Commit transaction Decode Metal draw 16.67 ms App Render

    Server 21
  22. Event Commit transaction Decode Metal draw Render 16.67 ms App

    Render Server GPU 22
  23. Event Commit transaction Decode Metal draw Render Display 16.67 ms

    App Render Server GPU Display 23
  24. 16.67 ms App Render Server GPU Display 24

  25. App Render server Layout Display Prepare Commit Create animation Render

    each frame 25
  26. Will it freeze? 26

  27. Render pipeline • Commit transaction stages • What is render

    server • How animations and graphic pipeline works 27
  28. Agenda 1. Render pipeline 2.Images and downsampling 3. Drawing 4.Performance

    issues 28
  29. JPEG Image Buffer UIImageView Decode Frame Buffer 29

  30. JPEG Image Buffer Decode Frame Buffer Thumbnail Downsample 30

  31. 31

  32. 32

  33. PNG vs PDF 33

  34. Image rendering • CPU bound • Downsampling 34

  35. Agenda 1. Render pipeline 2. Images and downsampling 3.Drawing 4.Performance

    issues 35
  36. UIView CALayer setNeedsDisplay setNeedsDisplay Backing Store 36

  37. Old Retina 37

  38. Layer.contentScale 38

  39. Backing Store UIView CALayer Frame Buffer contents draw 39

  40. UIImageView CALayer Image contents Frame Buffer 40

  41. Concurrent Drawing 41

  42. CALayer.drawsAsynchronously 42

  43. CALayer CoreGraphics drawInContext Other Work Rendering CGContextDrawImage 43

  44. CALayer CoreGraphics drawInContext Other Work Rendering CGContextStrokePath CGContextDrawImage CGContextFillRect 44

  45. 45

  46. Drawing model • UIKit calls drawRect on the main queue

    • You can draw an image on on another queue • Set your image to UIImageView on main thread • drawsAsynchronously (use carefully) 46
  47. Agenda 1. Render pipeline 2. Images and downsampling 3.Drawing 4.Performance

    issues 47
  48. Performance issues • Oversized image • Offscreen rendering • Color

    blending 48
  49. Performance issues • Oversized image • Offscreen rendering • Color

    blending 49
  50. 50

  51. Frame Buffer Offscreen Buffer 51

  52. Frame Buffer Offscreen Buffer 52

  53. Frame Buffer Offscreen Buffer 53

  54. Frame Buffer Offscreen Buffer 54

  55. Frame Buffer Offscreen Buffer 55

  56. Frame Buffer Offscreen Buffer 56

  57. 57

  58. 58

  59. Some Text 59

  60. Some Text 60

  61. Rasterize! 61

  62. Rasterize! 62

  63. Offscreen rendering • Expensive • Alternative approach • Use rasterization

    • Limited cache size • Throws away if hierarchy was changed • Lasts only 100ms if idle 63
  64. Performance issues 64 •Oversized image •Offscreen rendering •Color blending

  65. 65

  66. Solutions • opaque = true • Images without alpha 66

  67. 67

  68. Summary • GPU or CPU bound • Big image size

    • Async drawing • Too much offscreen rendering • Too much blending 68
  69. Михаил Сорокин @mick_sn 69