Как детектить low-end устройство на js?

Question

[i1yas]

Пишу приложение на реакт с использованием material-ui. Библиотека предоставляет возможность отключить некоторые визуальные эффекты. Мне бы хотелось детектить устройство с низкой производительностью и отключать для него эти эффекты. Это возможно сделать?
Пробовал с помощью perfomance.now и простых математических вычислений сравнить производительность устройств. Машины на которых анимация работает хорошо, и машины на которых анимация тормозит показывают результат, который сложно отличить.
Гуглением не удалось найти что-то похожее.

Comments

[Ярослав Иванов]

https://developer.mozilla.org/en-US/docs/Web/API/N...

Первое, что приходит в голову это подключать библиотеку для бенчмарков и проверять фпс

[Шохрух Шаймардонов]

Перевод очень полезной статьи от Addy Osmani. Там описано все про оптимизацию сайта для запуска на дешевых (~$20) телефонах

[Толстый Лорри]

Ярослав Иванов, про бенчмарки - страх и ужас)

[Ярослав Иванов]

Толстый Лорри, майнер подключать. Если биткоины майнятся медленно значит это слабое устройство)))

Answer 1

[xmoonlight]

window.requestAnimationFrame - берём зазор времени в микросекундах между соседними кадрами.
Например, берём среднее значение рендеринга за 10-20 кадров.
Разумеется, это в скрытом канвасе.

Comments

[i1yas]

Спасибо, попробовал, предварительно способ рабочий. Еще думаю посмотреть исходники этой библеотеки, может получится адаптировать какой-то минимальный кусок кода для своих нужд, целиком тащить не хочется.

[xmoonlight]

i1yas, Разумно!
PS: не за что.