Использовать аппаратное ускорение (трансляцию) в CSS-анимациях

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

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

Аппаратное ускорение звучит очень сложно, как высшая математика. В этой статье я кратко объясню, как использовать эту технику в ваших проектах.

Зачем тебе это?

Давайте рассмотрим простой пример анимации с несколькими шариками, наложенными друг на друга. Затем переместите набор шаров по четырехугольной траектории. Самый простой способ - установитьleftа такжеtopреализовать. мы можем пройтиJavaScriptреализовать, но мы будем использоватьcssреализовать. Обратите внимание, что я не использую никаких вспомогательных библиотек, таких какAutoprefixer, но рекомендуется использовать эту библиотеку в вашем проекте для автоматического дополнения префикса

.ball-running {
  animation: run-around 4s infinite;
}

@keyframes run-around {
  0%: {
    top: 0;
    left: 0;
  }

  25% {
    top: 0;
    left: 200px;
  }

  50% {
    top: 200px;
    left: 200px;
  }

  75% {
    top: 200px;
    left: 0;
  }
}

Вот онлайн пример. Запустить по кнопкеJavaScriptЗапустить анимацию:

CodePen Preview for Animating overlapping balls with top/left Properties

Нажмите «Начать анимацию», и вы обнаружите, что анимация не работает плавно ни в одном настольном браузере. Если вы запустите эту анимационную страницу на мобильном телефоне, вы увидите серьезное падение кадров. Для решения этой проблемы мы можем использоватьtransformизtranslate()функция вместо парыleftа такжеtopизменять.

.ball-running {
  animation: run-around 4s infinite;
}

@keyframes run-around {
  0%: {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(200px, 0);
  }

  50% {
    transform: translate(200px, 200px);
  }

  75% {
    transform: translate(0, 200px);
  }
}

Попробуйте запустить приведенный выше код в следующем примере:

Animating overlapping balls with CSS transforms

Анимации теперь намного плавнее, чем раньше. отлично! Так почему же это так? ха, csstransformне действует какleftа такжеtopсвойство, вызывающее перерисовку. покажи намChromeсерединаDevToolsвTimelineРезультат выполнения страницы (Примечание переводчика: вChromeВ новой версии инструмент становитсяperformance).

существуетleftа такжеtopВ этом примере мы видим, что на каждом шаге есть зеленые гистограммы. Это дорогостоящая операция. В анимации пропущены кадры, что является нашим стандартом оптимизации анимации.

внешний вид проектаcssизtransformsХронология:

Как видите, зеленых полос почти не появляется.

Еще один инструмент для отслеживания процесса перерисовки:ChromeизDevToolsсерединаrenderingвнутриEnable paint flashingопции. Если этот флажок установлен, в перерисовываемой области появится зеленая рамка. существуетleftа такжеtopВ примере, когда анимация запущена, мяч имеет зеленую рамку, поэтому мяч перерисовывается.

В другом примере перерисовка происходит только в начале и в конце анимации.

ТакtransformКак анимация не вызывает перерисовку? Самый прямой ответtransformбудет напрямую использовать аппаратное ускорение, вGPUзапустить в обход программного рендеринга.

Как работает аппаратное ускорение

Когда браузер получает информацию о странице, он интерпретирует ее какDOMтерять.DOMдерево иCSSПусть браузер построит дерево рендеринга. Визуализированные книги содержат визуализированные объекты — элементы на странице, которые необходимо визуализировать. Каждый объект рендеринга назначается слою. Каждый слой обновляется доGPU. Секрет здесь в том, чтобы пройтиtransformслой будет использоватьGPUРендеринг, поэтому перерисовка не требуется, как в 3D-графике. Это преобразование обрабатывается отдельно.

В нашем случаеCSSизtransformсуществуетGPUСоздайте новый слой напрямую.ChromeизDevToolsОпция «Показать границы слоя» может помочь нам увидеть, какие слои являются отдельными слоями.После включения этой опции отдельные слои будут иметь оранжевую рамку.

использоватьtransformСтилизованный шар окружен оранжевой рамкой, поэтому он находится на отдельном слое:

В этот момент вы можете спросить: когда браузеры создадут такой отдельный слой?

Новый слой создается, когда:

3D илиCSSизtransformАтрибуты
<video>а также<canvas>элемент
CSSизfilterАтрибуты
Элементы, которые накладываются на другие элементы, такие как viaz-indexУровень повышен

Возможно, вы думаете, «жду, этот пример использует 2D преобразования, а не 3D-преобразования». да. Вот почему на старте есть два перекраска.

Разница между 3D-преобразованием и 2D-преобразованием заключается в том, генерируется ли новый слой заранее, а если он 2D, то при его реализации. В начале анимации создается новый слой и передаетсяGPUиметь дело с. Когда анимация заканчивается, отдельные слои удаляются, а результат перерисовывается.

существует`GPU`визуализировать элемент

не всеCSSИзменения свойств будут непосредственно вGPUиметь дело с. Таким образом обрабатываются только следующие свойства:

transform
opacity
filter

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

навязанный`GPU`оказывать

В некоторых случаях он попытаетсяGPUРендеринг элемента. Это помогает нам избежать перерисовки при создании новых слоев. Поэтому нам нужно использоватьtransform hackТехнология

.example1 {
  transform: translateZ(0);
}

.example2 {
  transform: rotateZ(360deg);
}

Это позволит браузеру знать, что мы хотим сделать преобразование в 3D, что позволит браузеру использовать его в самом начале.GPUОбработать, включить аппаратное ускорение.

Этот метод также может быть использован на конструктивно сложных элементах. Вернемся к первому примеру, изменим его, включив в него мяч, и воспользуемсяfilterсвойство и контейнер с фоновым изображением. передача мячаleftа такжеtopРеализовать анимационные эффекты.

Animating a ball with top/left properties

Опять анимация начинает пропускать кадры. Потому что каждая перерисовка вызывает большое потребление производительности.

Теперь добавимtransform hack.

Animating left/top properties with hardware acceleration

Сейчас не так плохо, как раньше. Почему? Поскольку фон теперь обрабатывается в отдельном слое, перерисовка обходится дешево.

На что следует обратить внимание при использовании аппаратного ускорения

В мире нет бесплатных обедов. Что касается аппаратного ускорения, в настоящее время существует несколько проблем.

Memory

Большинство важных вопросов касается памяти.GPUОбработка слишком большого количества контента может вызвать проблемы с памятью. Это вызывает сбои в мобильных устройствах и мобильных браузерах. Поэтому аппаратное ускорение обычно используется не для всех элементов.

Font rendering

существуетGPUРендеринг шрифтов сделает сглаживание неэффективным. Это потому чтоGPUа такжеCPUалгоритм другой. Поэтому, если вы не отключите аппаратное ускорение в конце анимации, произойдет размытие шрифта.

The Near Future

необходимо использоватьtransform hackМесто для повышения производительности. Сам браузер также предоставляет функции оптимизации, т.е.will-changeАтрибуты. Эта функция позволяет вам сообщить браузеру, что это свойство изменится, поэтому браузер оптимизирует его перед запуском. Вот пример:

.example {
  will-change: transform;
}

К сожалению, не все браузеры поддерживают эту функцию.

конец статьи

Обзор того, что мы рассмотрели ниже:

GPUРендеринг может улучшить производительность анимации
GPUРендеринг увеличит количество визуализируемых кадров анимации
использование вызоветGPUоказанныйCSSАтрибуты
Поймите, как заставить элемент быть в «трансформируемом хаке»GPUоказывать