Обнаружение медленных аппаратных/медленных браузеров с использованием JavaScript

На моем веб-сайте есть несколько анимаций и переходов CSS, которые очень медленно обрабатываются в некоторых браузерах (к счастью, не в большинстве из них) и с некоторым старым оборудованием. Я пытаюсь избежать нюхать UA; есть ли способ обнаружения браузеров или аппаратных конфигураций с использованием JavaScript или JS-библиотеки, а затем загружать неанимированные версии для браузеров, которые, как я знаю, не имеют хорошей поддержки для этих функций?

Просто, чтобы устранить любую двусмысленность, я не ищу что-то вроде Modernizr.

Ответ 1

Это отнюдь не достаточно для обнаружения медленной системы, но минимизирует влияние на пользователей таких систем:

Используйте переходы CSS и запускайте их с помощью jQuery (путем переключения классов по мере необходимости), выгружая анимацию элементов в механизм рендеринга, чтобы функциональная отзывчивость страницы не пострадает, по крайней мере.

Используйте правильные свойства CSS. Например, вместо анимации свойств top:10px;left:10px; используйте CSS-преобразование transform: translateX(10px) translateY(10px), который будет более эффективным.

Ускорение аппаратного ускорителя (GPU) путем добавления transform: translate3d(0,0,0); или аналогичного обходного пути к целевому элементу.

Если вы абсолютно привязаны к анимации или вам необходимо вызвать резервную функциональность (скрыть/показать/переместить элементы) без CSS по какой-либо причине, вы можете попробовать обходное решение Modernizr:

if(!Modernizr.csstransitions) {
  /*fallback logic*/
}