Уже довольно долгое время ломаю голову по поводу того как мне вставить SVG анимацию в свой довольно тяжёлый интерфейс. До этого получалось обходиться css анимацией, не вызывающей layout на каждом кадре. Для наглядности сделал пример самой тривиальной анимации (
https://jsfiddle.net/LordGuard/xswtevmx/1/ ), который работает крайне быстро на пустой (ну или почти пустой) странице. Но когда дело доходит до более менее серьёзного интерфейса он по не очень понятным мне причинам начинает вызывать update layer tree на 3+ мс (в лучшем случае, иногда и все 20 мс). При чём никакой contain: strict, никакое вынесение на отдельный gpu слой и пр. не помогают. Очевидна явная зависимость длины update layer tree (да и layout кажется) от загруженности остального интерфейса как бы я ни старался отделить эту анимацию ото всего остального.
Чтобы проверить мои слова вы можете скопировать код из моего примера и вставить его к примеру в код twitter'а после всего остального кода его интерфейса. При чём абсолютно схожая ситуация наблюдается и при использование css анимации (а не svg), вызывающей layout (left, width...). Какой бы простой анимация не была - если она вызывает layout вне зависимости от того как вы её изолировали за ней следует тяжёлый update layer tree.
Вот пример использования моей анимации на twitter.com:
Что с этим можно сделать? Неужели это невозможно оптимизировать?
Простой
Простой
