Impact of css3 on website speed and PC performance?

Question

css

Prompt resources, tools and articles where you can learn more about how other things affect box-shadow, gradient, filter, animation, transformthe speed of the site, the work of the GPU ... (if they affect anything).

Why the more animation (just css3 animation) and some modern "goodies" with shadows and filters, the more the whole PC "freezes".

The same goes for svg images and smil animations.

Answer 1

We can start with this note and the csstriggers label . In a nutshell, what matters is which CSS properties are changed, because most of them force the browser to recalculate the entire page in order to render it. And to recalculate a really large page 60 times per second is such a thing. In this sense, if the animation can be done using only transform and opacity, it's better to do so. And you can almost always.
Filters are different. Here CSS, SVG, something of your own on WebGL - it doesn't matter, the algorithm is important. If the filter simply changes color for each pixel, for example, then it will give a minimal additional load - there will be a linear dependence of the number of operations on the number of pixels. But blur or shadows already require something to be calculated for each pixel, depending on neighboring pixels. The stronger the blur, the more calculations are required. Laptops with integrated graphics or phones may simply lack hardware capabilities and everything will slow down. Well, do not forget that a video card loaded at 99% will make everything slow down, even if the central processor is not loaded at all.

Answer 2

What kind of modern PC can completely hang on buns and animations on the web?
The dependence is direct:
raster images - take up a lot of space, but they practically do not need to be rendered - just download and display
vector things - they take up little space (a set of formulas), but they have to be rendered before being displayed - accordingly, time and resources of the user PC are spent much more.
Therefore, when the place and channel on the server is more expensive (and it is always more expensive), you have to sacrifice something.
It is cheaper to give more and more work to the client side + so that there is greater responsiveness, all animation is immediately loaded onto the client PC and processed there on the spot.