JS, который показывает FPS для анимации JS и CSS3

Question

Я делаю серию тестов (небольшое исследование), чтобы увидеть разницу в анимации жидкости (путем измерения кадров в секунду) между использованием JS для анимации объекта или JS с помощью CSS3 анимация.

Я уже нашел некоторые решения для получения счетчика FPS (метр) в JS, но мне нужно вызывать его каждый раз, когда я вызываю функцию рендеринга. Это было бы хорошо, если анимация выполняется исключительно на части javascript. Если я решит перейти от анимации с использованием JS к CSS3, насколько я знаю, нет способа определить, насколько быстро будет эта транзакция.

Я знаю, что для браузеров webkit (проверено в Chrome) я могу получить такую ​​информацию через инструменты разработчика, но так как я буду тестировать и на других платформах, я ищу универсальное решение.

Любые идеи, предложения, все, что указывает мне на правильное направление, оцениваются. Благодарю.

Answer 1

Итак, я нашел решение. Это называется FPSMeter, и он был разработчиком Дэвидом Корвозиером. Вы можете найти библиотеку и многое другое об этом here.

В основном он придумал хорошую идею, просто добавив 1 анимированный элемент CSS в тело страницы. Затем он использует переходы для анимации этого элемента, и на каждом requestAnimationFrame он пытается вычислить вычисленное положение этого элемента. С каждой секундой он просто подсчитывает количество различных позиций, занимаемых элементом. Исходя из этого, он получает FPS.