Низкий FPS в Google Chrome при перерисовке страницы?

Question

[Денис Инешин]

Привет, посмотрите пожалуйста пример.

Суть задачи — двигать слои при движении мышкой. И все бы хорошо, если бы не ужасно низкий FPS в Chrome.



Сравнение:

Chrome 24: 20-25 fps!!!

Firefox 18: 95-110 fps

Opera 12: 70-90 fps

IE 10: 100-120 fps



Почему такое может быть? Что я делаю не так?





Обнаружил в Crome Dev Tools, в панели Timeline, что действия Paint и Composite layers — занимают по 6-9 мс каждое. Как это ускорить? Не ужели хром такой тормозной на самом деле?





Попробовал сделать через CSS translate, как в этой статье. Но ничего не изменилось, возможно для таких здоровых слоев такой подход не работает.

Answer 1

[Александр Кит]

1. mousemove — здесь стоит только определять значение позиции, а обновлять надо в requestAnimationFrame. Эдакое «отложенное позиционирование». В хроме, mousemove может слишком часто вызываться — и из-за этого лаги с перерисовкой.
2. translate — лучше translate3d(X,Y,'0px')

Answer 2

[LegoMushroom]

www.youtube.com/watch?v=nxXkquTPng8 хороший разговор на эту тему.

Answer 3

[Денис Инешин]

Спасибо, про requestAnimationFrame я еще почитаю, но второй вариант помог. FPS в Chrome сразу прыгнул до 60 (видимо выше там не бывает)

Comments

[Александр Кит]

Вот нашел в старом проекте простой черновой вариант — dragger gist — может пригодится.

[Валерий Демидов]

До 60 он прыгнул, т. к. requestAnimationFrame задаёт частоту обновления сцены - 60 в секунду.