requestIdleCallback :

Perform low priority work on the main event loop, without impacting latency-critical events such as animation and input response

Step I

Open Chrome Console to observe logs

• [Sync] When clicking buttons, Lottie Animation has performance issues
• [Async] Using requestIdleCallback, to see what is happening
  Simulating React 16+ Fiber

Step II

Sync 同步阻塞, 动画卡顿

Step III

Please click other different buttons, to see how requestIdleCallback affects the animation performance

A B C