WWDC 2021: Avoid hitches and discover the Render Loop
Find hereafter a detailed summary of three videos that belong to a taxonomy of some WWDC footages.
The original videos are available on the official Apple website (session 10855, session 10856 and session 10857)).
"Explore how you can improve the performance of your app's user interface by identifying scrolling and animation hitches in your app. We'll take you through how hitches happen in the render loop, and explain how to measure hitch time ratio and fix the issues that most impact people using your app."
"Discover how to render smoother animations in your app by troubleshooting the commit phase of your render loop. Dive into the mechanics of this phase, and learn how to use Instruments to uncover the source of hitches in your app, eliminate them, and avoid them outright."
"When you implement complex view hierarchies in your app, you may run into animation hitches. Demystify how your views are turned into pixels during the render phase, and learn how to use Instruments to uncover issues in this part of the render loop. Discover how to eliminate offscreen passes and leverage Xcode optimization opportunities in order to provide a great experience when using your app."
The various contents of this video are indicated hereunder:
Most of the illustrations are parts of the Apple presentations and may be available at the Resources section inside the Overview sheet of each video.
Hereafter, the underlined elements lead directly to the playback of the WWDC video at the appropriate moment.
Hitches #
Hitches appear when a user notes a stuttering effect instead of a natural smooth feedback.
The origins of the hitches arise from an incomplete work of the Render Loop on a frame during its time duration and these events are of two types that are detailed in depth in the next sections.
The Render Loop #
This non-stop process captures the touch events and provides this information to the system for analyzing and displaying the final result.
This work is highly bound to the device capacity because the loop happens at its refresh rate.
Process #
The Render Loop is a three-stage process representing three different steps to be completed to state a frame to be ready.
To accurately specify the functions of this process, various phases have been created in the preceding stages called the five phases.
Frames #
The VSYNC event emitted by the hardware is referring to the ready state that a frame should abide by to provide a smooth user experience.
At least two frames are required for rendering the desired result but, if some troublesome situations occur, another frame may be necessary.
The Render Loop frames are managed in some parallel processes to guarantee the best result.
Example #
A shape made of various elements is unpacked to understand each phase of the Render Loop that displays this graphical element.
The Commit phase #
During this phase, divided into four parts (Layout, Display, Prepare and Commit), the app:
- Modifies the interface according to the handled events first,
- Provides the updated layer tree to the render server in a second time.
Additional time and memory may be required during this phase if the images must be edited.
Commit hitch #
Based on the time taken by the commit, a delay might be necessary to provide an appropriate frame to the render server and then being responsible for the detected hitch.
Instruments #
When hitches frames are detected, the Animation Hitches interface is the perfect tool to dive deeper into the proper analysis and find out solutions.
Useful information is highlighted to understand what's wrong and to easely point out the potential causes of the problems.
The Time Profiler tool in Instruments can be concomitantly used to look into the code and find out the piece of code responsible for the detected hitches.
Recommendations #
Mainly based on the example that showed up the best practice for avoiding commit hitches, some recommendations are emphasized to apply them as often as possible.
The Render phase #
This phase is divided into two parts whose goal is to prepare the layer tree as a pipeline of drawings commands to be executed by the GPU to get a frame ready to be displayed.
Render hitch #
If both render phases haven't been completed on time to make a frame ready to be displayed, then a render hitch occurs.
Offscreen pass #
The offscreen pass happens when it's necessary for the GPU to switch to a different texture in order to apply a specific effect to a graphic element.
Shadows, masks, rounded rectangles and visual effects are the main types for which the offscreen pass is essential to avoid slowing down the rendering and causing render hitches.
Instruments & Xcode #
Besides the information provided in The Commit Phase Instruments part, elements located in the Buffer Count column and the Render Count column are introduced to detect hitches and find out solutons for this specific phase.
Moreover, the Xcode debugger is significantly used to look into the layer tree when problems occur...
... with a new Xcode 12 feature to be used as an optimization suggestion.
Many elements like views, layers and runtime issues can be wrapped in a sendable file to be shared with someone having the same device.
Recommendations #
Use the provided APIs regarding more specifically the masking and the rounded rectangle shapes.
The use of maskToBounds is advised for optimizing masking.
Hitch time measurement #
A metric called hitch time ratio has been introduced to represent the amount of milliseconds the device is hitching every second.
After a short example to explain how this new metric works, some thresholds are suggested to use it as best as possible.
