Notimetosleep
@Notimetosleep
Founder/programmer in WEB Studio "ilavista"

От чего зависит плавность работы анимации на сайте?

У меня на хостинге сейчас находится порядка пяти сайтов. Использую на сайтах библиотеки для создания анимации при прокрутке (а также другие jQuery библиотеки) и замечаю, что на некоторых из этих сайтов анимация работает плавно и красиво, а на других подтормаживает. Я понимаю, что это связано с содержимым сайта, с количеством графического материала, но каким образом повлиять на это не знаю и хорошего материала на эту тему тоже к сожалению не нашел. Буду очень признателен за любую информацию (можно на английском) по данному вопросу.
Использую следующие библиотеки: Slick, AOS, ScrollToFixed, Magnific-Popup
  • Вопрос задан
  • 712 просмотров
Пригласить эксперта
Ответы на вопрос 3
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Вам необходимость использовать Timeline в Chrome DevTools для профилирования производительности анимаций и не только.

Хотите знать основы оптимизации рендеринга - вам сюда https://www.udacity.com/course/browser-rendering-o...

Причин плохой оптимизации может быть вагон и маленькая тележка. У вас там могут огромные элементы анимироваться с помощью top/left вместо transform: translate, у вас при каждом скролле может идти repaint огромных картинок, забирая по 60-100мс на каждый шаг и так далее. Скорее всего причины крайне простые и связаны с использованием древних и убогих методик для анимаций, аля jQuery.animate (который до 3й версии юзает setTimeout вместо requestAnimationFrame под капотом).
Ответ написан
Собирайте все анимируемые элементы (если анимируете группой) в один абсолютный, и двигайте через transform: translateX(<смещение>), translateY(<смещение>), translateZ(<смещение>) вместе со свойством transition. Это все CSS3.

Как альтернативный вариант, тег , в том числе WebGL (например, инструмент https://github.com/PixelsCommander/HTML-GL)

Общее правило по оптимизации анимаций, в котором нужно двигаться — максимально уменьшите количество анимируемых элементов, их сложность (вложенность), каскадность стилей, делайте элементы абсолютно позиционированными, простыми (без прозрачности, градиентов, закруглений, и прочего), делайте самый минимум DOM модификаций, и по-возможности анимируйте при помощи CSS3 или .

Нужно чтобы браузер выполнил минимум операций при перерисовке страницы во время анимации.

Чтобы посмотреть что рисует браузер во время анимации, есть удобный инструмент.
https://developer.chrome.com/devtools/docs/renderi...

На скриншоте есть "Show paint rectangles". Включите это, увидите как браузер реально перерисовывает страницу.
Ответ написан
bingo347
@bingo347 Куратор тега JavaScript
Бородатый программер
Перенесите всю dom-анимацию в css, на js анимации быть не должно в принципе (за исключением canvas)
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
15 авг. 2020, в 22:41
2700 руб./за проект
15 авг. 2020, в 22:37
2000 руб./за проект
15 авг. 2020, в 22:12
2000 руб./за проект