Как оптимизировать анимацию SVG относительно загрузки процессора?

Question

Я разрабатываю анимацию пояснительной линии, используя SVG/SMIL, и сталкиваюсь с большими нагрузками на процессор при просмотре анимаций в Firefox. Существуют ли какие-либо рекомендации для самого SVG и для декларативной анимации в отношении производительности процессора? Поскольку разные зрители и браузеры будут давать разные результаты, я ищу общие правила, которые я также надеюсь перевести в API веб-анимаций.

Answer 1

Вы можете найти некоторые ссылки и информацию здесь

Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)

Здесь вы можете увидеть низкую производительность процессора в Fire Fox

https://www.youtube.com/watch?v=1RK3l6H0uDU&feature=youtu.be

в то время как Chrome хорошо работают с SMIL анимации. Но в близком будущем, как сказано здесь, в последнем посте https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/5o0yiO440LM/59rZqirUQNwJ,

«это, вероятно, будут удалены в какой-то момент в ближайшем будущем»

Это о поддержке SMIL в Chrome. В Fire Fox анимации SMIL стали очень медленными, начиная с версии 38, а медленная анимация все еще не исправлена ​​(в текущем 39.0).

Существует вероятность того, что Fire Fox отремонтирует поддержку SMIL анимации в будущих версиях, как они говорили:

У нас нет никакого намерения принизить SMIL на данном этапе.

но Chrome (не в 45 версии, может быть, позже) даст нам сообщение (если страница есть SMIL в нем содержание):

CONSOLE ВНИМАНИЕ: SVG-х SMIL анимации (, и т.д. .) устарели и будут удалены. Пожалуйста, используйте CSS анимацию или веб-анимации вместо