Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

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

Частота кадров любой анимации должна составлять 60 кадров в секунду, поскольку пользователи заметят любые подвисания или задержки и воспримут это отрицательно

TL;DR

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

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

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

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

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

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

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

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

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

Производительность при использовании CSS и JavaScript – что лучше?

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

  • Анимация средствами CSS обычно обрабатывается отдельно от основного потока браузера, в котором выполняется стилизация, перерасчет макета, перерисовка и поток JavaScript. Это означает, что, если браузер выполняет какие-то ресурсоемкие задачи в основном потоке, анимация, выполненная средствами CSS, потенциально может продолжать работать без прерывания. Изменение свойств transform и opacity во многих случаях может обрабатываться тем же потоком, что и анимация на основе CSS (этот поток называется потоком компоновщика), поэтому в идеале для анимации следует использовать именно эти свойства.
  • Если какая-либо анимация вызывает перерисовку, перерасчет макета или и то, и другое, для нее потребуется основной поток. Это верно для анимации, выполненной как средствами CSS, так и средствами JavaScript, а затраты, связанные с перерасчетом макета или перерисовкой, вероятнее всего, намного превысят объем работы, связанный с выполнением CSS или JavaScript. При этом сам вопрос, что лучше – CSS или JavaScript, становится неактуальным.

Если вы желаете точно знать, что происходит при анимации того или иного свойства, подробные сведения об этом см. в разделе Срабатывание событий при изменении CSS.