Почему анимация с аппаратным ускорением CSS в главном потоке стоит слишком дорого, чем «составной слой»? - PullRequest
Новая
       0

Почему анимация с аппаратным ускорением CSS в главном потоке стоит слишком дорого, чем «составной слой»?

0 голосов
/ 25 февраля 2020

Я использую большую картинку (33440 x 440) и трансформирую большое изображение, затем получаю анимацию, подобную анимации кадров; а также я использую translate3D, чтобы получить ускорение графического процессора,

упрощенный код ниже: 

  @keyframes testName {
    0% { transform: translate3d(0,0,0); }
    100% { transform: translate3d(-33440px,0,0); }
  }

, как мы знаем, работа составных слоев переместится в GPU; но в chrome devtools производительности задача составных слоев в основном потоке стоит слишком много времени: (декодирование изображения происходит в растровом потоке, а не в основном потоке) enter image description here enter image description here

так почему и что задача composite layers сделала в главном потоке?

1 Ответ

1 голос
/ 25 февраля 2020

Проблема в том, что ваше изображение ОГРОМНО. «Компоновка слоев» приблизительно означает отображение всех элементов (слоев) на странице друг над другом в правильном порядке и расположении, что займет много времени, если эти слои будут гигантскими c. То, что это происходит на GPU, не означает, что это произойдет мгновенно, если вы добавите в него 14-мегапиксельное изображение.

...