CSS-анимация (@keyframes) нагревает процессор
У меня есть простая CSS-анимация, как вы можете видеть здесь: http://jsfiddle.net/628uzdfn/
У него просто есть одна анимация @keyframes, которая вызывает проблему (когда я удаляю анимацию, она не нагревает процессор) (синтаксис стилуса):
@keyframes moving
from
transform translateX( 0 ) translateZ( 0 )
to
transform translateX( -15% ) translateZ( 0 )
Проблема в том, что если вы позволите этой странице жить более 10 секунд, вы почувствуете тепло под ноутбуком. Если оставить его более чем на 30 секунд, он будет звучать как трактор!
Я уже читал материалы, связанные с производительностью, на html5rocks, поэтому я попытался ограничить свои свойства анимации только transform, даже попытался поставить translateZ( 0 ), чтобы попросить помощи у GPU, но это ничего не меняет.
Вы также можете увидеть мой профиль производительности здесь:
Я что-то делаю не так?
Что мне делать, чтобы улучшить анимацию с точки зрения ее производительности?
Обновлять: Забыл упомянуть, что эта анимация - infinite, так что это может быть проблемой, но почему это происходит? Я уже видел много бесконечных CSS-анимаций, которые не снижали производительности. Проблема должна быть в другом.
@ KrzysztofAtłasik Я буду рад, если вы проверите мой jsFiddle, я уже установил его, но ничего не произошло.
Кажется, он хорошо работает в Chrome, вы используете другой браузер?
@Joru Я пытаюсь сделать надстройку для FireFox, так что да, я использую FireFox Quantum 63.0.3 и тестировал на Chrome тоже, у меня была такая же проблема. У вас определенно есть ноутбук с конфигурацией лучше, чем у меня, но не могли бы вы взглянуть на исходный код и сказать мне, если что-то не так?
На мой взгляд, он вообще не использует никаких ресурсов, поэтому я сомневаюсь, что все дело в аппаратном обеспечении. У вас установлены новейшие графические драйверы и ОС?
@Joru Я не обновлялся до macOS Mojave, и это не должно быть проблемой. Потому что тогда что, если кто-то не обновится до последней версии macOS? Стоит ли испытать этот кошмар? Но я не уверен насчет своего графического драйвера, я могу запускать Hearthstone и Dota 2 на моем ноутбуке, поэтому я сомневаюсь, что с драйвером есть какие-либо проблемы.
@mrReiha, поскольку вы используете translateX, вам не нужен translateZ(0), поскольку вы уже используете 3d. Кроме того, will-change не поможет, поскольку анимацию слишком просто оптимизировать, но использование will-change потребляет немного памяти и может ухудшить производительность. Кстати, вы можете сделать тот же анимация с меньшим количеством кода и большей гибкостью.
@KoshVery Это было интересное решение, спасибо за подробности, которые вы предоставили. Но через 30 секунд он сойдет с ума, как и в моем собственном примере! И я отчаянно не понимаю, что происходит. Для меня это самая важная вещь - понять, что именно происходит.
@mrReiha, похоже, проблема с нагревом специфична для вашего компьютера. Я не смог воспроизвести это, даже открыв одновременно 10 окон. Я предлагаю вам проверить, использует ли ваш браузер аппаратное ускорение.
@Kosh Очень хорошо, я дважды проверил это в разделе производительности в настройках, и да, там было проверено использование аппаратного ускорения. Я хотел бы попросить вас сделать мне одолжение, откройте эта ссылка вверх, и вы увидите два разных типа анимации в первом разделе, парящий единственный логотип вверху и бесконечную CSS-анимацию в прокручиваемой части внизу. раздела. но ни один из них не заставляет мой процессор звучать так, как я открываю эти примеры. Очень странно.
Что это за компьютер?
@ arman311 MacBook Pro 2015. macOS Sierra (10.12.6)
@mrReiha А. Есть идеи, какой в нем процессор?
@ arman311 Yeap, Intel Core i5 с частотой 2,7 ГГц.
Ах. Тогда я не знаю ответа. Я думал о похожей проблеме, которая была вызвана Intel Core M, но i5 вполне достаточно.
Я не могу воспроизвести проблемы с производительностью в Firefox Linux, но я предлагаю использовать translate3d (-15%, 0, 0), поскольку он будет использовать графический процессор для анимации jsfiddle.net/umcp8w5x
@DanielDoblado Да, я много раз слышал, что проблема возникает только на моем устройстве, но все еще происходит. Меня это очень раздражает! но что касается предложенного вами варианта translate3d(), там уже есть translateZ(), поэтому я думаю, что translate3d() ничего не изменит.
Становится лучше, если к overflow: hidden добавить .container? Улица кажется переполненной, но вы этого не видите, потому что страница и блоки белые.
@SalmanA Может, забыл поставить на пример overflow: hidden, не помню. но реальный дизайн действительно имеет overflow: hidden; все еще возникает проблема.
Это помогает? jsfiddle.net/628uzdfn/2 Я изменил анимацию с перевода на маржу
@HerrSerker Это точно не поможет, просто добавит болезненной краски к каждому кадру анимации.
@mrReiha Тогда я ничем не могу помочь. С точки зрения производительности у вашей исходной анимации не должно быть проблем. Анимация слишком простая и маленькая. Во-первых, у вас не должно быть проблем с отоплением.
@HerrSerker Да, я знаю, но это происходит, и наверное не моя вина.
@mrReiha Я не говорю о том, кто виноват. Я хотел решить проблему, которой у O даже нет. Увы, нам сложно помочь очень, если исходная проблема не воспроизводится на чужом оборудовании. О чем вы могли бы подумать: ваш предпоследний комментарий можно считать грубым. Я лично не обижаюсь, но могу потерять мотивацию помогать тебе, как и другие.
@HerrSerker Тебе просто нечего было делать. Я говорил, что мне действительно сложно испытать что-то на моем хорошо подготовленном устройстве, чего другие даже не видят. и это было больше похоже на шутить. не хотел тебя обидеть, кстати, прости.
@mrReiha Никто не пострадал. Но вы знаете, писать анекдоты в Интернете рискованно.
@HerrSerker Милая, у тебя серьезные проблемы <3
Привет ... тебе удалось решить свою проблему? То же самое и с моим MBP 2017.
@Alioshr Боюсь, у меня все еще та же проблема.
Я прочитал несколько статей об этом в среде, и кажется, что бесконечные анимации превращаются в блокноты. Взгляните на этот medium.com/better-programming/…
Похоже, нам следует избегать анимации в CSS, особенно бесконечной. У меня был шеврон, указывающий вниз от переднего баннера моей домашней страницы, который двигался бесконечно, и у меня был процессор до 90%, пока я делал другие вещи при разработке страницы во время анимации. Я отказался от бесконечной сделки и заставил ее запускаться всего 4 раза при рендеринге страницы,
Другие бесконечные анимации, которые у вас могут быть, могут быть заменены, например, GIF-файлами, которые будут работать намного проще.
Ответы 2
Не уверен, что не так с вашим компьютером, но на моем компьютере процессор не является большой проблемой. Тестирование в Chrome 66.0, Ubuntu 18.04.
Ваша анимация проста, но ее можно оптимизировать в 2 раза (CPU) лучше, просто заменив translateX( -15% ) на translateX( -108px ). 108px равен ширине 15% вашего элемента, но имеет фиксированный пиксель. Браузеру не нужно пересчитывать значение каждого кадра анимации. Таким образом, он определенно будет использовать меньше процессора. Вот результат моего процессора до и после оптимизации
До
После
На самом деле, это было хорошим моментом для размышления, но это невозможно. поскольку другие дизайнерские решения были приняты, использовать пиксельные блоки там невозможно. мой элемент .street будет иметь разные размеры. фиксированный 600 пикселей в скрипке предназначен только для создания примера.
@mrReiha Думаю, это все, что я могу сделать с вашей анимацией. Это действительно простая анимация
Это была действительно хорошая точка зрения, уважаемая. проголосовали. но просто не мог помочь мне решить мою проблему :(
У меня нет возможности проверить это, но я попробую.
Мои первоначальные мысли о том, почему это может происходить после того, как вы уже сделали правильные улучшения css GPU, основаны на % и float, а также на количестве анимированных вами .block (просто некоторые дикие догадки).
Я внес изменения и воссоздал .block с помощью repeating-linear-gradient с некоторыми другими изменениями.
https://codepen.io/oneezy/pen/JwbpPz
@keyframes moving {
from { transform: translateX(-50px) translateZ(0); }
to { transform: translateX(-150px) translateZ(0); }
}
.container {
width: 600px;
height: 100px;
}
.street {
background: #333;
height: 100%;
width: 100%;
display: flex; flex-direction: column; justify-content: center;
overflow: hidden;
}
.block {
animation: moving 1.5s linear infinite;
will-change: transform;
display: block;
width: 200%; height: 6px;
transform: translateX(-50px);
background-image: repeating-linear-gradient(to right, transparent, transparent 50px, white 50px, white 100px);
}<div class = "container">
<div class = "street">
<div class = "block"></div>
</div>
</div>Я действительно ценю все усилия, которые сообщество прилагает для решения моей проблемы. насчет предоставленного вами ответа, если я не ошибаюсь, @kosh уже использовал эту конкретную технику (в любом случае это интересно). Я сейчас работаю над чем-то другим, но я протестирую вашу ручку как можно скорее. спасибо <3
ааа, я только что видел его скрипку.
Я никогда не слышал, чтобы float был тяжелым, и это действительно странно! но все те улучшения, которые вы упомянули (удаление элементов .block и float), похоже, работают более плавно. Процессор снова станет горячим, но, возможно, потребуется больше 20 секунд (первый пример сошел с ума через 30 секунд, а вашему примеру для этого случая требуется 50-60 секунд). проголосовали, но у меня до сих пор нет объяснений, что именно происходит (я думаю, что никто не сможет это сделать :))))) поэтому я не могу принять лучший ответ :(
Можете ли вы попробовать добавить свойство css
will-change: transformк элементу, к которому вы применяете анимацию, и проверить, помогает ли это?