Animation Performance
Explore techniques to optimize animation performance in Angular applications. Understand frame rate targets, the browser's drawing sequence, and how to leverage compositor threads to avoid stutter. Learn to identify expensive CSS properties and use tools to monitor FPS, CPU usage, and main thread impact for creating smooth, efficient animations.
We'll cover the following...
Maintaining a 60 frames-per-second (FPS) frame rate when we’re animating is very important because anything less will result in a noticeable stutter, or what is commonly referred to as jank. The key here is to be able to identify which properties are expensive to animate and which aren’t, and utilizing the compositor thread (a thread in the browser that leverages the GPU to create the final version of the page seen on the screen) wherever possible. We’ll go over some additional metrics that we should be aware of when writing our animation code.
Drawing sequence
User interfaces have a specific drawing sequence, which is as follows ...