Как сравнить производительность анимационных решений Javascript и CSS?

Question

Я создаю приложение, в котором производительность анимации очень важна. Я построил javascript решение для анимации / переходов. Затем я построил то же решение, написанное в Javascript + CSS, и затем я построил то же решение, используя чистый CSS.

. Теперь я хочу сравнить их, чтобы увидеть, какие из них более эффективны. Мне было удобно использовать performance.now () для сравнения чистого javascript кода, например:

var t0 = performance.now();
doSomething();
var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");

Это работает довольно хорошо. Но теперь, когда анимация входит в микс, я не уверен, как это сравнить. Все решения имеют анимацию, которая занимает 750 мс, поэтому использование времени не работает, так как я не пытаюсь измерить точность, а потерю системы.

Как это проверить? Есть ли инструмент, который «искажает» вычислительную мощность моего браузера, чтобы я мог имитировать те же солютины в менее мощном процессоре?

Answer 1

Вам, вероятно, нужно будет проверить свою страницу, проверить рендеринг и посмотреть, достигает ли он отметки 60fps. И если между чистыми решениями CSS и js есть различия.

---

Вы можете использовать частоту кадров анимации, чтобы измерить, насколько отзывчивым чувствует приложение. 60 кадров в секунду - это общепринятая цель для достижения «естественного» ощущения.