Краткое описание: Chromium автоматически обновляет свои возможности аппаратного ускорения для SVG-анимации, процентных преобразований, а вскоре и для анимации фонового цвета и клип-пути.
Когда дело доходит до производительности веб-анимации, скорее всего, возникнут термины «аппаратное ускорение» и «анимация с графическим ускорением». Но что это вообще означает? Стили с аппаратным ускорением — это стили, в которых для визуализации визуальных стилей используется графический процессор (графический процессор), а не центральный процессор (центральный процессор). Это связано с тем, что графический процессор может отображать визуальные изменения на веб-странице быстрее, чем центральный процессор.
Использование графического процессора для разгрузки переходов и анимации с интенсивным использованием графики обеспечивает более плавную визуализацию и меньшее количество рывков, поскольку на эти анимации не влияет основной поток. Вытаскивая их из основного потока, ваши анимации обходят кору других активных скриптов, работающих на вашей странице, что замедляет работу визуальных элементов и приводит к зависаниям.
Включение аппаратного ускорения анимации
Анимации с аппаратным ускорением объединяются в слои и помогают разработчикам добиться плавной анимации со скоростью 60 кадров в секунду (кадров в секунду) для повышения производительности визуального рендеринга. В настоящее время существует несколько способов указать и включить в Интернете анимацию и переходы с аппаратным ускорением:
- Используйте функции
transformCSS или изменяйте значенияopacityилиfilter - Добавьте свойство
will-changeк вашему элементу. - Создайте анимированный рисунок на холсте с помощью
OffscreenCanvas - Создайте 3D-чертеж WebGL
opacity , filter и transform , скоро к списку присоединятся background-color и clip-path .Что еще становится аппаратно ускоренным по умолчанию в Chromium? В разработке находится несколько вещей, в том числе SVG-анимация, о чем разработчики очень просили .
Аппаратное ускорение SVG-анимации
SVG — отличное дополнение к любому веб-сайту, и теперь взаимодействие с SVG может стать более эффективным. Начиная с Chromium 89, Chrome присоединится к Firefox, чтобы по умолчанию включать аппаратное ускорение для SVG-анимации. Что вам, разработчику, нужно сделать? Ничего — это будет автоматически применено к SVG-анимации в Chromium 89+.
Пример
Давайте посмотрим на различия между SVG-анимацией с включенным аппаратным ускорением и без него. Индикаторы загрузки — это часто используемые элементы пользовательского интерфейса, такие как тот, который можно увидеть на facebook.com. Эти индикаторы намекают на то, что на сервере выполняется работа, пока пользователь ожидает ответа. В показанном здесь случае ответом будет загрузка дополнительных результатов на боковую панель.
Когда мы открываем DevTools, мы можем начать профилировать и действительно увидеть различия между анимацией с ускорением ЦП и графическим процессором.
Вы можете видеть, что слева (Chromium 87) перерисовка происходит каждый раз, когда анимируется счетчик (что происходит постоянно). Справа перекраски нет (Chromium 89 и Firefox). Мы можем проверить это на панели рендеринга DevTools при включении мигания Paint.
Присмотревшись к панели «Производительность», вы снова увидите этот эффект и то, как он влияет на общую производительность вашего веб-ресурса. Вы полностью избегаете времени рендеринга и рисования анимации, что означает более плавную анимацию и более производительные приложения. Хотя Facebook не будет поставлять этот загрузчик на основе SVG до тех пор, пока браузеры не усилят поддержку SVG с аппаратным ускорением, это обеспечит большую гибкость с точки зрения требований к темам, масштабированию и разрешению, а также упростит обслуживание.
Процентная анимация
Команда Interactions также предоставляет поддержку анимации процентного преобразования в Chromium 89. Процентная анимация описывает взаимодействия, которые включают процентное движение. Например, вы можете увеличить что-то на 20 % или выдвинуть адаптивное меню боковой панели за пределы экрана, используя что-то вроде translateX: -100% .
Эти типы анимации пользовательского интерфейса относительно распространены, но в настоящее время они не используют преимущества аппаратного ускорения, поскольку ранее мы не могли составлять такие анимации. Проценты в преобразованиях зависят от размера блока (то есть макета), но теперь, пока размер макета не меняется в каждом кадре, браузер может предварительно рассчитать абсолютные значения преобразования и запускать их, как если бы разработчик предоставил значения пикселей. Хорошей новостью является то, что команда Chromium работает над этой функцией, и вскоре эти типы анимаций будут автоматически компоноваться и аппаратно ускоряться.
Что будет дальше?
Эти обновленные анимации сделают веб-стилизацию более плавной. И, как упоминалось выше, команда всегда следит за будущими потребностями Интернета. Прямо сейчас мы планируем преобразовать background-color и clip-path для автоматического использования аппаратного ускорения в будущих версиях Chromium.
background-color является приоритетом из-за большого количества использований для переходов и эффектов, а clip-path обеспечивает гораздо более эффективные эффекты перехода в Интернете. Когда производительность сочетается с интерактивностью, выигрывают все!
Изображение на обложке: Siora Photography для Unsplash.