Understanding Render Loop to optimise SwiftUI
summary
Explains SwiftUI's render loop phases (event, view update, render, display) and shows a real animation that hitches until adding the drawingGroup modifier, which flattens views into bitmaps. For clouds that fixes lag and cuts CPU from >100% to ~33% while raising memory from ~11MB to ~57MB; for continuously regenerated, animated petals drawingGroup backfires, pushing CPU toward 100% and memory from ~73MB to ~142MB, so use selectively.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:26Render loop in SwiftUI
- 2:49Event phase and state
- 4:16View update phase
- 5:43Render phase and display
- 6:25Render loop in action
- 8:10Hitches and frame drops
- 9:35Laggy animation demo
- 10:59Analyzing laggy code
- 13:30Fix lag with drawing group
- 14:55Performance comparison after optimization
- 16:18Cherry blossom breakdown
- 18:25Petals performance drop
- 19:49When not to use drawing group
- 21:36Recap and key takeaways
- 22:17Resources
related talks
24mSwiftUI Performance Tips
16mAnimation juice in SwiftUI
35mAnimations with SwiftUI
35mSwiftUI Performance for Demanding Apps
30mFrom Slow to Flow: Tips for Accelerating Your App Performance
28mElevating your design with SwiftUI
47mSwiftUI Performance for Demanding Apps
38mBuilding Responsive Interactions