GPU Ускорение анимированного и размытого контента

Question

Вопрос: Почему мой процессор регистрирует ~30%, когда применяется размытие, и ~6%, когда размытие не применяется к анимированному объекту?

Подробности:

У меня есть набор случайно сгенерированных элементов на странице, которым назначена анимация CSS (в файле CSS), и случайно сгенерированные значения ширины, высоты и, что важно, размытия, примененные в строке.

Стили CSS-файлов выглядят так:

animation-name: rise;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);

transform: translateZ(0);

ширина, высота и размытие применяются в style приписывать.

<div class="foo" style="width:99px;height:99px;
                        filter:blur(2px);
                        -webkit-filter:blur(2px) opacity(0.918866247870028);
                        -moz-filter:blur(2px) opacity(0.918866247870028);
                        -o-filter:blur(2px) opacity(0.918866247870028);
                        -ms-filter:blur(2px) opacity(0.918866247870028);"></div>

При включенном размытии загрузка процессора составляет ~30%. Когда я отключаю размытие, загрузка процессора снижается до ~6%.

Что тут происходит? Способен ли Chrome ускорять GPU только при отсутствии размытия? Если так, то почему?

Обновление 1:

Анимация rise выглядит следующим образом:

@keyframes rise {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-1000px);
    }
}

Answer 1

Я не думаю, что размытие на самом деле вызывает ваши проблемы, оно просто делает его более заметным, чем раньше. Проблема в том, что transform: translateY в вашей анимации перезаписывается transform: translateZ(0) вы используете для ускорения GPU.

Это запись временной шкалы для кода, который вы сейчас запускаете, обратите внимание, как все это происходит в основном и растровом потоках:

Теперь сравните это с записью, где я подал заявку will-change: transform к .foo:

Нет активности на основном и растровом уровне.

Есть два шага для применения этого исправления:

1. Применять will-change: transform в .foo, Это позволит браузеру узнать, что вы намереваетесь изменить это свойство, и отобразит этот элемент в графическом процессоре, чтобы учесть это.

2. Нет версий Edge и IE will-change в данный момент. Поэтому мы будем использовать transform: translate3d(0, -1000px, 0); в анимации для ускорения GPU. Обратите внимание, что это взлом, поэтому мы обнаружим поддержку will-change и использовать transform: translateY в браузерах, которые его поддерживают.

Финальный код:

@keyframes rise {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 1000px, 0);
  }
}

@supports (will-change: transform) {
  @keyframes rise {
      0% {
          transform: translateY(0px);
      }
      100% {
          transform: translateY(1000px);
    }
  }
}

div {
  width: 100px;
  height: 100px;
  background: #f00;
  animation: rise forwards 2s linear infinite;
  will-change: transform;
}

Смотрите здесь для рабочей версии: http://jsbin.com/mosuvikoto/edit?html,css,output

Answer 2

Не стирайте это во встроенных стилях. Поместите свое пятно в файл стиля.