Являются ли свойства CSS3, такие как анимация, слишком ресурсоемкими для ЦП?

Избегайте использования box-shadow и text-shadow. Не пытайтесь анимировать всю страницу или элемент body и использовать translate3d, scale3d, rotate3d, поскольку они аппаратно ускоряются на компьютерах и мобильных устройствах. Как указано выше, избегайте ЧРЕЗМЕРНОГО ИСПОЛЬЗОВАНИЯ анимационных свойств. Однако я сомневаюсь, что один или даже четыре бесконечно анимированных элемента замедлят работу вашей страницы.

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

ОБНОВЛЕНИЕ

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

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

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

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

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

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

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

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

Если вы используете только 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:

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