Render Loop와 Hitch
WWDC 정리
Hitch?
- Animation hitches can cause jumps in animation and break the connection.
- A hitch is any time a frame appears on screen later than expected.
- Hitches are caused when the Render Loop fails to finish a frame on time.
The Render Loop
- The Render Loop is a continuous process by which touch events are handed to an app, and then changes to the UI are sent to the OS where the frame is finalized.
- It happens at the device's refresh rate.
iPhone & iPad
- Refresh rate: 60Hz
- Frame duration: 16.67ms
This is 60 frames per second. which means a new frame can be displayed every 16.67ms.
iPad Pro
- Refresh rate: 120Hz
- Frame duration: 8.33ms
The Render Loop
- Beginning
- the hardware emits an event called a VSYNC.
The VSYNC denotes when a new frame must be ready.
- the hardware emits an event called a VSYNC.
- The Render Loop is timed to VSYNCs.
- Three Stages
- App
- Render Server
- This stage is where your UI is actually rendered.
- On the display
- This 3 stages must complete before the next VSYNC.
- Double Buffering
- App + Render Server stages
- To avoid hitches, the system may switch to triple buffering.
- render server stage is given one extra frame duration to complete its work.
- The Real Render Loop (5 phrases)
- App
- Event (Layer Tree)
- your app handles touch events and decides if a change is needed in the UI.
- Commit (Layer Tree)
- your app updates the UI, and submits that to the render server for rendering.
- Event (Layer Tree)
- Render Server
- Render prepare (Image)
- the Render Server takes the submission, and prepares it for drawing on the GPU.
- Render execute
- the GPU draws your UI into a final image.
- Render prepare (Image)
- On the display
- Display
- the frame can be displayed to the user.
- Display
- App
Types of hitches
Commit hitch
- App takes too long to commit or process an event.
- happen within the app's process.
- the render server has nothing to process and must wait for the next VSYNC to begin rendering
-
16.67 ms, we call this delay duration "hitch time".
- more info about commit hitches
Render hitch
- Rendering on the server does not complete in time.
- happend within the Render Server's process.
- These happen when the render server is unable to prepare or execute our layer tree on time.
Measuring hitch time
Difficulty
- it's difficult to compare unless each scroll or animation takes the exact same amout of time and therefore the exact same number of frames.
- iOS device does not always update their screen, if there are no commits sent to the Render Server.
Hitch Time Ratio
- It is the total hitch time in an interval divided by its duration.
- Because it's normalized to total time, we can compare it across experiences.
- The Way of Using it
- To track hitch time ration in the test suite
Usage
- Duration
- 30 frames at 60 FPS = 0.5 s
- Hitch time
- 0 ms
- Hitch time ratio
- 0/0.5 = 0 ms/s
- Duration
- 30 frames at 60 FPS = 0.5 s
- Hitch time
- 100.02 ms
- Hitch time ratio
- 100.02/0.5 = 200.04 ms/s