Современные браузеры могут недорого анимировать два свойства CSS: transform и opacity . Если вы анимируете что-либо другое, скорее всего, вам не удастся добиться плавной анимации с частотой 60 кадров в секунду (FPS). В этой статье объясняется, почему это так.
Производительность анимации и частота кадров
Общепринято считать, что целевая частота кадров при создании веб-анимации составляет 60 FPS. Такая частота кадров обеспечит плавность анимации. В веб-среде кадр — это время, необходимое для обновления и перерисовки экрана. Если каждый кадр не завершается в течение 16,7 мс (1000 мс / 60 ≈ 16,7), пользователи будут ощущать задержку.
Конвейер рендеринга
Для отображения чего-либо на веб-странице браузеру необходимо выполнить следующие последовательные шаги:
- Стиль : Рассчитайте стили, которые применяются к элементам.
- Макет : Сгенерируйте геометрию и положение для каждого элемента.
- Рисовать : Заполнить пиксели каждого элемента.
- Композиция : Разделите элементы на слои и выведите эти слои на экран.
Эти четыре этапа известны как конвейер рендеринга браузера.
При анимации на уже загруженной странице эти шаги необходимо повторить. Этот процесс начинается с шага, который необходимо изменить, чтобы анимация запустилась.
Как уже упоминалось, эти шаги выполняются последовательно . Например, если вы анимируете что-то, что изменяет макет, то этапы отрисовки и композиции также должны быть выполнены заново. Поэтому анимация чего-то, что изменяет макет, обходится дороже, чем анимация чего-то, что изменяет только композицию.
Анимация свойств макета
Изменения в компоновке включают в себя расчет геометрии (положения и размера) всех элементов, затронутых изменением. Если вы изменяете один элемент, может потребоваться перерасчет геометрии других элементов. Например, если вы изменяете ширину элемента <html> , это может повлиять на любой из его дочерних элементов. Из-за того, как элементы перекрывают друг друга и влияют друг на друга, изменения, происходящие ниже по дереву, иногда могут привести к перерасчету компоновки вплоть до самого верха.
Чем больше дерево видимых элементов, тем дольше выполняются расчеты компоновки.
Анимация свойств краски
Процесс отрисовки — это определение порядка отображения элементов на экране. Зачастую это самая длительная задача в конвейере обработки данных.
В современных браузерах большая часть отрисовки выполняется программными растеризаторами . В зависимости от того, как элементы вашего приложения сгруппированы в слои, помимо изменившегося элемента, может потребоваться отрисовка и других элементов.
Анимация композитных свойств
Композитинг — это процесс разделения страницы на слои, преобразования информации о том, как должна выглядеть страница, в пиксели (растеризация) и объединения слоев для создания страницы (композитинг).
Именно поэтому свойство opacity включено в список элементов, анимация которых обходится недорого. Пока это свойство находится в отдельном слое, изменения в нем могут обрабатываться графическим процессором на этапе композитинга. Браузеры на основе Chromium и WebKit создают новый слой для любого элемента, имеющего CSS-переход или анимацию по свойству opacity .
Что такое слой?
Размещая элементы, которые будут анимироваться или переходить на новый слой, браузеру нужно будет перерисовывать только эти элементы, а не всё остальное. Возможно, вам знакома концепция слоя в Photoshop, который содержит множество элементов, которые можно перемещать вместе. Отрисовка слоев в браузере аналогична этой идее.
Хотя браузер хорошо справляется с определением того, какие элементы должны находиться на новом слое, если он что-то упускает, существуют способы принудительного создания слоя. Подробнее об этом можно узнать в статье «Как создавать высокопроизводительные анимации» . Однако создание новых слоев следует проводить с осторожностью, поскольку каждый слой использует память. На устройствах с ограниченным объемом памяти создание новых слоев может вызвать больше проблем с производительностью, чем та, которую вы пытаетесь решить. Кроме того, текстуры каждого слоя необходимо загрузить на графический процессор. Поэтому вы вполне можете столкнуться с ограничениями пропускной способности между центральным и графическим процессорами.
Сравнение производительности CSS и JavaScript
Возможно, вы задаетесь вопросом: с точки зрения производительности лучше использовать CSS или JavaScript для анимации?
Анимации на основе CSS и веб-анимации (в браузерах, поддерживающих API) обычно обрабатываются в потоке, известном как поток композитора . Это отличается от основного потока браузера, где выполняются стилизация, компоновка, отрисовка и JavaScript. Это означает, что если браузер выполняет ресурсоемкие задачи в основном потоке, эти анимации могут продолжаться без прерывания.
Как поясняется в этой статье, другие изменения преобразований и прозрачности во многих случаях также могут обрабатываться потоком композитора.
Если какая-либо анимация запускает отрисовку, компоновку или и то, и другое, то основной поток должен будет выполнить работу. Это справедливо как для CSS, так и для JavaScript-анимаций, и накладные расходы на компоновку или отрисовку, вероятно, значительно превысят любые затраты, связанные с выполнением CSS или JavaScript, что делает этот вопрос неактуальным.