We just learned the benefits of using requestFrameRate and CSS animations. However, if we want to improve our animations' performance, how can we find out what is slowing things down?

Nowadays, we have tools that help us find these bottlenecks, and one of them is Chrome DevTools, which is a collection of tools that comes with the Chrome browser. To open Chrome DevTools, just press F12 or click on any part of a page, and then click on Inspect element. This tool is very familiar for web developers. Now, we will learn how to analyze the timeline frames mode.

We need to record the execution, so Chrome will show us a real-time report with the frame rate, as shown in the following screenshot:

The top-right timeline has lines for 30 fps and 60 fps, and the height of each vertical bar on Frames View represents the time it took to complete a frame and send it to the screen. So, if we have vertical bars above the 60 fps horizontal line or above the...