Почему элементарная css-анимация так нагружает CPU?

Question

[Павло Пономаренко]

У меня есть очень простой тестовый пример:

<div id="container">
  <div id="target"></div>  
</div>

И очень простая анимация для него:

@keyframes marquee-x {
	from { transform: translate(0, 0); }
	to   { transform: translate(-100%, 0); }
}
#container {
  width: 200px;
  height: 100px;
  margin: 40px;
  background: rgba(255,0,0,0.4);
}
#target {
  background-color: black;
  border-radius: 0px;
  width: 50px;
  height: 50px;
  animation: marquee-x 5s infinite;
}

И вот этот простейший пример грузит CPU на 20% (по сути почти полностью загружает одно ядро):



Стоит отключить анимацию - нагрузка сразу падает:


Почему? Как с этим бороться? Я помню всегда радостные статьи, как translate оптимизирован и вообще никак-никак не должен влиять на производительность.

transform: translateZ(0); и will-change: transform; никак не влияют на результат

Answer 1

[Александр Таратин]

Видимо на вашей системе браузер не использует аппаратное ускорение на полную.
Обновите драйвера (или наоборот - откатитесь).

Comments

[Павло Пономаренко]

У вас этот пример не оказывает влияния на проц?

[Александр Таратин]

Павло Пономаренко, В районе 6%, но у меня довольно дохлое ноутбучное железо.

[Павло Пономаренко]

Александр Таратин, спасибо. Возможно вы правы на счет GPU

[AngReload]

Павло Пономаренко, на планшете с Intel Atom тратит 10% ресурсов проца.

Answer 2

[Юрий]

- Конфликт скриптов? Отключите все дополнения и повторите.
- Попробуйте в другом браузере. Я, снеся firefox, в Яндексе этого не наблюдаю (+4%)

Comments

[AngReload]

Эй, не наговаривайте на FireFox, он быстрый.