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

Question

[Артем Менченя]

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

Answer 1

[Nikolay Talanov]

Вам необходимость использовать Timeline в Chrome DevTools для профилирования производительности анимаций и не только.

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

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

Answer 2

[Роман Якимчук]

Собирайте все анимируемые элементы (если анимируете группой) в один абсолютный, и двигайте через 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". Включите это, увидите как браузер реально перерисовывает страницу.

Comments

[Роман Якимчук]

Тостер сьел теги. В пробелах писал про тег canvas.

[Nikolay Talanov]

Вы перечислили кучу рандомной информации, большая часть из которой далека от правды или искажает действительность. Фокус на абсолютном позиционировании это вообще бред, ибо это никак не связано с рендеринг пайплайном.

[Роман Якимчук]

Nikolay Talanov: При смещении не абсолютно позиционированных элементов браузер пересчитывает позиционирование соседних элементов снижая этим проихводительность анимации, в то время как при абсолютном позиционировании считается только пересечение слоев.

[Nikolay Talanov]

RomanYakimchuk: если вы их будете смещать с помощью top/left то браузер все будет пересчитывать в любом случае, ибо эти свойства триггерят layout. Если же использовать православные траснформы, то браузеру вообще пофиг какое позиционирование у элемента, ибо элемент будет помещен в отдельный слой для композитинга и жить своей жизнью во время процесса рендеринга. Хотите получить качественные основы по оптимизации рендеринга - вам сюда https://www.udacity.com/course/browser-rendering-o...

[rinatoptimus]

У меня почему-то нет иконки Open drawer. Chrome Версия 51.0.2704.103 m

Answer 3

[Дмитрий Беляев]

Перенесите всю dom-анимацию в css, на js анимации быть не должно в принципе (за исключением canvas)

Comments

[Артем Менченя]

Насколько я понимаю, AOS использует CSS анимацию, а js используется для определения прокрутки до определенного положения, вряд ли проблема в этом

[Nikolay Talanov]

Что за бред вы пишите товарищ, все сложные анимации всегда делаются с помощью жс, потому-что css декларативен и с ним вы можете только анимировать состояния, ховеры и прочие более менее простые вещи, не зависящие от динамических величин, движения/скролла мышки и подобного.

[Дмитрий Беляев]

Nikolay Talanov: найдите хоть один подобный пример, который не решается css-анимацией

[Nikolay Talanov]

Дмитрий Беляев: как вы парралакс вещи при скроллинге анимируете с помощью css если не секрет? Это самый примитивный пример.

[Дмитрий Беляев]

Nikolay Talanov: https://habrahabr.ru/post/235531/

[Nikolay Talanov]

Дмитрий Беляев: я прекрасно знаю об этом, но это крайне кривая и упрощенная фигня, которая даже и на 10% не покрывает тех вещей, которые можно делать с js параллаксом (который я не особо люблю, но это другое дело).