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

Браузеры выполняют отрисовку в три этапа: Компоновка (размер и положение) → Рисование (пиксели) → Сведение (объединение слоёв на GPU). Анимация свойств, запускающих более ранние этапы, требует значительных ресурсов.

Изменение этих свойств заставляет браузер заново рассчитывать компоновку, потенциально для всей страницы. Избегайте их анимации:

• width, height
• margin, padding
• top, left
• font-size
• display

Эти свойства пропускают этап компоновки, но заставляют браузер заново рисовать пиксели. Они требуют умеренных затрат ресурсов:

• background-color
• color
• box-shadow
• border

Эти свойства пропускают и компоновку, и рисование — браузеру нужно только объединить предварительно растеризованные слои. Это очень дёшево и ускоряется с помощью GPU:

• transform
• opacity

Для плавных анимаций с частотой 60 кадров в секунду анимируйте только transform и opacity. Используйте transform: translate() вместо изменения положения сверху или слева, а opacity — вместо плавного исчезновения через display.

will-change сообщает браузеру, что элемент нужно заранее перевести в собственный слой GPU до начала анимации, чтобы во время анимации не возникала «вспышка» при переводе в слой.

После завершения анимации установите will-change: auto или полностью удалите это свойство. Слишком большое количество элементов в отдельных слоях расходует память GPU.

Используйте вкладку Производительность в Chrome DevTools, чтобы записать и проверить длительность кадров. На вкладке Отрисовка можно включить подсветку перерисовки: зелёный слой покажет, какие элементы перерисовываются в каждом кадре.

Самая эффективная оптимизация — заменить анимацию положения преобразованием:

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

Свойство contain сообщает браузеру, что элемент и его поддерево независимы. Это ограничивает область, которую браузеру нужно пересчитывать при изменении компоновки, и повышает производительность перерисовки.

Какие два свойства CSS можно анимировать на этапе сведения, не запуская компоновку или рисование?

Анимация свойств компоновки (ширины, положения сверху, внешнего отступа) запускает дорогостоящие пересчёты. Свойства рисования (цвет, фон) требуют меньше ресурсов. Только transform и opacity анимируются на этапе сведения с помощью GPU, не запуская компоновку или рисование. Для плавных и производительных анимаций всегда отдавайте им предпочтение.