Анимации и производительность

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

Поддерживайте частоту 60 кадров в секунду при любой анимации, поскольку меньшая частота приведет к подтормаживанию или зависанию, которые будут заметны вашим пользователям и негативно скажутся на их впечатлениях.

  • Позаботьтесь о том, чтобы ваши анимации не вызывали проблем с производительностью; убедитесь, что вы знаете, как повлияет анимация определенного свойства CSS.
  • Анимация свойств, изменяющих геометрию страницы (макет) или вызывающих отрисовку, обходится особенно дорого.
  • По возможности используйте изменение трансформаций и непрозрачности.
  • Используйте will-change , чтобы браузер знал, что вы планируете анимировать.

Анимация свойств не бесплатна, и некоторые свойства анимировать дешевле, чем другие. Например, анимация width и height элемента изменяет его геометрию и может привести к перемещению или изменению размера других элементов на странице. Этот процесс называется макетом (или переформатированием в браузерах на основе Gecko, таких как Firefox), и может быть дорогим, если на вашей странице много элементов. Всякий раз, когда запускается макет, страницу или ее часть обычно нужно отрисовывать, что обычно даже дороже, чем сама операция макета.

Где это возможно, следует избегать анимации свойств, которые запускают макет или рисование. Для большинства современных браузеров это означает ограничение анимации до opacity или transform , оба из которых браузер может в высокой степени оптимизировать; неважно, обрабатывается ли анимация JavaScript или CSS.

Прочитайте полное руководство по созданию высокопроизводительной анимации .

Использование свойства will-change

Browser Support

  • Хром: 36.
  • Край: 79.
  • Firefox: 36.
  • Сафари: 9.1.

Source

Используйте will-change , чтобы браузер знал, что вы собираетесь изменить свойство элемента. Это позволяет браузеру применить наиболее подходящую оптимизацию до того, как вы внесете изменения. Однако не злоупотребляйте will-change , так как это может привести к тому, что браузер будет тратить ресурсы впустую, что в свою очередь вызовет еще больше проблем с производительностью.

Общее правило заключается в том, что если анимация может быть запущена в течение следующих 200 мс, либо из-за взаимодействия пользователя, либо из-за состояния вашего приложения, то наличие will-change для анимированных элементов является хорошей идеей. В большинстве случаев, таким образом, любой элемент в текущем представлении вашего приложения, который вы собираетесь анимировать, должен иметь включенный will-change для любых свойств, которые вы планируете изменить. В случае примера с коробкой, который мы использовали в предыдущих руководствах, добавление will-change для преобразований и непрозрачности выглядит следующим образом:

.box {
  will-change: transform, opacity;
}

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

Производительность CSS и JavaScript

В сети есть много страниц и тем комментариев, в которых обсуждаются относительные достоинства CSS и JavaScript-анимаций с точки зрения производительности. Вот несколько моментов, которые следует иметь в виду:

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

  • Другие изменения преобразований и непрозрачности во многих случаях также могут быть обработаны потоком компоновщика.

  • Если какая-либо анимация запускает отрисовку, макет или и то, и другое, для выполнения работы потребуется "главный поток". Это справедливо как для анимаций на основе CSS, так и JavaScript, и накладные расходы на макет или отрисовку, скорее всего, затмят любую работу, связанную с выполнением CSS или JavaScript, что делает вопрос спорным.