IonDen
@IonDen
JavaScript developer. IonDen.com

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

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

Суть задачи — двигать слои при движении мышкой. И все бы хорошо, если бы не ужасно низкий 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, как в этой статье. Но ничего не изменилось, возможно для таких здоровых слоев такой подход не работает.
  • Вопрос задан
  • 6838 просмотров
Решения вопроса 1
  1. mousemove — здесь стоит только определять значение позиции, а обновлять надо в requestAnimationFrame. Эдакое «отложенное позиционирование». В хроме, mousemove может слишком часто вызываться — и из-за этого лаги с перерисовкой.
  2. translate — лучше translate3d(X,Y,'0px')
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
LegoMushroom
@LegoMushroom
www.youtube.com/watch?v=nxXkquTPng8 хороший разговор на эту тему.
Ответ написан
Комментировать
IonDen
@IonDen Автор вопроса
JavaScript developer. IonDen.com
Спасибо, про requestAnimationFrame я еще почитаю, но второй вариант помог. FPS в Chrome сразу прыгнул до 60 (видимо выше там не бывает)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы