Свойства CSS3, такие как animate, слишком загружают процессор - PullRequest
Новая
       12

Свойства CSS3, такие как animate, слишком загружают процессор

6 голосов
/ 06 декабря 2011

замедлит ли этот повторяющийся анимационный код мою систему?: 

@-webkit-keyframes animate {-webkit-animation-iteration-count:infinite;...}

Все ли свойства CSS3 требуют значительных ресурсов процессора?

Спасибо.

Ответы [ 5 ]

6 голосов
/ 06 декабря 2011

Каждый браузер имеет собственную реализацию CSS3, и способы обработки и визуализации эффектов различаются.Один браузер будет задыхаться от определенных вещей, а другой - нет.Лучше всего быть осторожным: не злоупотребляйте CSS3-эффектами, и все будет хорошо.Если вы действительно обеспокоены производительностью, вы всегда можете попробовать протестировать сайт, используя старый ноутбук или что-то еще.Если он захлебнется - вы могли бы преувеличить с градиентами или чем-то подобным.

Как говорит один из моих коллег-программистов (в отношении приложений C ++, но это совершенно применимо здесь): не беспокойтесь о проблемах производительности, пока вына самом деле их замечают:).

4 голосов
/ 01 декабря 2012

У меня была веб-страница, на которой было около 15 элементов, которые дрожали, как землетрясение.Анимация с шагом 10% и длится 1 с.Это повторяется в бесконечном цикле.Я заметил, что процессор использует Skyrocket.Так что я бы сказал, да, но это зависит от анимации,

4 голосов
/ 08 декабря 2011

Избегайте использования box-shadow & text-shadow. Не пытайтесь анимировать всю страницу или элемент body и используйте translate3d, scale3d, rotate3d, поскольку они аппаратно ускоряются на компьютерах и мобильных устройствах. Как указано выше, избегайте переизбытка анимационных свойств. Однако я сомневаюсь, что один или даже четыре бесконечно анимированных элемента будут замедлять вашу страницу.

Повышение производительности вашего приложения HTML5

UPDATE

Осторожно! Браузеры теперь отказываются от аппаратного ускорения для свойств transform-3D. Вам придется использовать другие методы для оптимизации ваших приложений как сейчас, так и в будущем.

1 голос
/ 23 января 2014

Если вы используете только 3D-преобразования в анимации CSS3, например: 

@keyframes animation { 
    0% { transform: translate3d(288px,123px,0px) rotate(10deg) scale(1,1) }
    50% { transform: translate3d(388px,123px,0px) rotate(20deg) scale(2,2) }
    100% { transform: translate3d(488px,123px,0px) rotate(30deg) scale(3,3) }
}

загрузка ЦП останется неизменной после того, как вы дадите браузеру указание воспроизвести анимацию. Это связано с тем, что 3D-преобразования всегда отображаются браузерами через ускорение графического процессора. (Примечание: для запуска ускорения графического процессора достаточно установить одно 3D-преобразование, как указано выше).

При запуске профилировщика ЦП Chrome делается следующий снимок:

enter image description here

Как вы можете видеть, активность процессора остается неизменной после того, как анимация CSS3 была проинструктирована с использованием некоторого кода JavaScript (в данном случае анимация была длиной 2 с).

1 голос
/ 03 января 2012

Я бы проверял использование процессора браузером при просмотре анимации. Некоторые функции могут не замедлять работу системы, а другие могут.

Это правда, что некоторые браузеры могут действовать по-разному на определенные вещи. Тем не менее, я тестировал с использованием вращающейся анимации, и он использовал около 30-50% загрузки процессора на моей машине с частотой 3,5 ГГц, тестируя с несколькими браузерами. Независимо от того, был ли он установлен на бесконечную итерацию, это не имело значения.

На данный момент некоторые функции могут замедлять работу машины и быть неудобными для пользователя. Вы можете подождать, пока эти функции будут оптимизированы, прежде чем использовать их. У меня такое ощущение, что они были разработаны неэффективно, потому что анимация выглядит плавно даже на моем iPod touch.

Также обратите внимание, что в моих браузерах не было ускорения GPU, что может быть фактором.

...