Почему элементарная изолированная анимация вызывает длинный «update layer tree»?

Уже довольно долгое время ломаю голову по поводу того как мне вставить 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: cH7c1.png

Что с этим можно сделать? Неужели это невозможно оптимизировать?
  • Вопрос задан
  • 628 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы