Влияние css3 на скорость сайта и производительность ПК?

Question

[Faber Estello]

Подскажите ресурсы, инструменты и статьи где можно больше узнать о том как влияют box-shadow, gradient, filter, animation, transform и прочее на скорость сайта, работу ГП ... (если на что и влияют).

Почему чем больше анимации (просто css3 анимации) и каких-то современных "плюшек" с тенями и фильтрами, тем больше "зависает" весь ПК.

То же и с svg картинками и smil анимацией.

Answer 1

[Ivan Bogachev]

Можно начать с этой заметки и таблички csstriggers. В двух словах - важно то, какие CSS-свойства меняются, т.к. большинство из них заставляют браузер пересчитывать всю страницу, чтобы ее отрендерить. А пересчитывать реально большую страницу 60 раз в секунду - дело такое. В этом смысле если анимацию можно сделать с помощью только transform и opacity - лучше так и сделать. А можно это почти всегда.

Фильтры есть разные. Здесь CSS, SVG, что-то свое на WebGL - не важно, важен алгоритм. Если фильтр просто для каждого пикселя меняет цвет например, то он даст минимальную дополнительную нагрузку - там будет линейная зависимость количества операций от количества пикселей. А вот blur или тени уже требуют для каждого пикселя что-то считать в зависимости от соседних пикселей. Чем более сильный blur, тем больше вычислений требуется. У ноутбуков со встроенной графикой или телефонов может просто не хватать возможностей по железу и все будет тормозить. Ну и не стоит забывать, что загруженная на 99% видеокарта заставит тормозить все, даже если центральный процессор не загружен вообще.

Comments

[profesor08]

Странная табличка у csstriggers.com, по ней выходит что браузеры на webkit перерисовывают все для любых свойств. Либо она про другое.

Answer 2

[AntHTML]

Это какой современный ПК может целиком зависать от плюшек и анимации в вэбе?
Зависимость прямая:
растровые картинки - занимают много места, но их практически не нужно рендерить - просто скачать и вывести на экран
векторные вещи - занимают мало места (набор формул), но их перед выводом приходится рендерить для показа - соответственно времени и ресурсов пользовательского ПК тратится гораздо больше.
Поэтому когда место и канал на сервере дороже (а оно всегда дороже) приходится чем-то жертвовать.
Дешевле все больше и больше работы отдавать на сторону клиента + чтобы была большая отзывчивость вся анимация сразу грузится на клиентский ПК и там на месте обрабатывается.