To be very honest, I sometime get afraid before creating any JavaScript animation. How do you make a guess that a particular animation will work smoothly irrespective of the system the user is using.
You can use DevTools of your browser to record a timeline when the animations happens. As @fibric said try not to trigger and layout and paint. Use requestAnimationFrame so that your animation runs on the starting of the frame and your animations run under 16ms and at 60fps.
Denny Trebbin
Lead Fullstack Developer. Experimenting with bleeding-edge tech. Irregularly DJ. Hobby drone pilot. Amateur photographer.
It's difficult to answer.
You can always measure wrong, interpret values wrong, or do not repeat tests correctly.
You must trust the DevTools of your chosen browser. Just adding JS code to measure DOM performance or CSS performance is stressing the wrong part of your browser.
I check manually if things feel smooth. If it feels laggy I spin up Chrome/Firefox DevTools and look for performance graphs. 'Paint' and 'Layout' are the bad guys to look for. To start with good performance, I often look at csstriggers.com to find which property to avoid.
css-tricks.com/myth-busting-css-animations-vs-jav…
greensock.com/css-performance