GPU ускоренная анимация CSS против родной анимации SVG

Мой вопрос в том, что быстрее, родные теги анимации SVG, например:

<path d="something very long and non-human-friendly">
    <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0" to="360" begin="0s" dur="3s" fill="freeze"
    repeatCount="indefinite" />
</path>

или анимации CSS, например:

path {
    animation: foo 3s ease-out infinite;
}

@keyframes foo {
    50% {
        transform: rotate(360);
}

Может быть, лучше использовать SVG-анимацию, поскольку SVG имеет лучшую поддержку браузера?

Связано также: Поскольку CSS-преобразование запускает аппаратное ускорение, мне также было интересно, могут ли собственные теги анимации SVG запускать ускорение GPU или нарисованы браузером. Если нет, возможно ли принудительное использование аппаратного обеспечения в собственных анимациях SVG?

Ура!

Ответ 1

На данный момент это не кажется полным ответом на эту тему.

Я просмотрел дополнительную информацию, и ответ часто зависит от того, какую реализацию вы используете с SVG (встроенный, встроенный) и какой браузер вы предпочитаете поддерживать.

Как правило, разработчики браузеров обычно концентрируют свою работу на оптимизации CSS3, а не на SVG, из-за более частого использования первого.

На этой простой странице Wikipedia вы можете найти некоторые примеры и другие сведения о текущем статусе, а эта страница на Центр разработчиков Mozilla показывает разную производительность перехода, ускоренного с помощью графического процессора, из-за использования CSS transform.

Ответ 2

Я много читал по этой теме, так как у меня были проблемы с производительностью в моем многоплатформенном приложении Phonegap и чтобы все было просто:

Никто не знает, какой CSS универсально аппаратно ускоряется, поскольку реализация стандартов фрагментирована, похоже, что iOS является лидером в ускорении CSS HW, но вы хотите ограничить оптимальный опыт тем, что доля рынка?

В конце концов я наткнулся на эту статью, которая пытается объяснить, что решения JS имеют лучшую совместимость и производительность. Добавляя возможности, которые просто недоступны для CSS. Имейте в виду, что обе статьи написаны создателем GSAP и, таким образом, предвзятым, но, просто попробовав, я убедился.

Более сложную версию вышеупомянутой статьи можно найти здесь.

Ответ 3

Как указывали другие, производительность зависит от исполняемого программного обеспечения. Тем не менее, было бы полезно знать, что (как писал JGM.io) анимация JS считается более высокой, чем анимация CSS3.

Помимо GSAP есть также анимационная библиотека под названием speed.js, которая поддерживает анимацию SVG. Следующая статья дает быстрое введение в анимацию SVG с помощью speed.js и почему она лучше, чем альтернативы https://davidwalsh.name/svg-animation (написанный создателем скорости .js, Джулиан Шапиро).

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

Ответ 4

По состоянию на 2019 г. ситуация все еще довольно неясна.

Спектакли сильно развивались во всех случаях.

При высоких нагрузках, во избежание задержек интерфейса, при интенсивном использовании движка javascript я обнаружил, что SVG быстрее при загрузке и рендеринге, чем анимации css, и действительно на один уровень выше относительно времени отклика при изменении размера окна или масштабировании. Также против анимированного холста.

Это касается как нативных svg, так и js animated svg.

Это действительно зависит от устройства.

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

Это имеет печальное объяснение, тем не менее в Linux/Firefox 66 ускорение графического процессора отключено по умолчанию. Включив about: config, производительность возросла до другого мира как для рендеринга, так и для использования процессора.

В about: config переключите в true следующую запись:

layers.acceleration.force поддержки

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

https://community.chakralinux.org/t/how-to-enable-opengl-compositing-in-firefox-for-a-smoother-browsing-experience-with-less-cpu-usage/7543

В chromium это по умолчанию отключено в Linux, для этого требуются обширные манипуляции:

https://www.linuxuprising.com/2018/08/how-to-enable-hardware-accelerated.html