How to detect low-end device in js?

Question

JavaScript

I'm writing a react app using material-ui. The library provides the ability to disable some visual effects. I would like to detect a device with low performance and disable these effects for it. This can be done?
I tried with the help of perfomance.now and simple mathematical calculations to compare the performance of devices. Machines on which the animation works well, and machines on which the animation slows down, show a result that is difficult to distinguish.
Googling couldn't find anything similar.

Answer 1

window.requestAnimationFrame - take the time gap in microseconds between adjacent frames.
For example, let's take the average rendering value for 10-20 frames.
Of course, this is in a hidden canvas.