How to understand and where to read about browser animation?

Question

Browsers

Good afternoon, dear connoisseurs.
I would like to ask you all a question about client optimization. Maybe someone can help me and everyone who is not indifferent.
There is a lot of information on the Internet about how to do client-side optimization, but all of them no longer have any appeal to me, since I read them all (perhaps even for the reason that I search for information badly).
You can find information about sprites, progressive images , reducing the number of server calls, and a bunch of other things, but I still can't find articles in the direction of animation optimization or something like that. Here is an example problem:
I have two squares that are made by ::after and ::before, which have different-sided gradients towards the center: example
and take this example
How to understand how certain properties work? How to understand which example is more productive?
PS I perfectly understand and know that there is an even better method . I ripped out such an example from a working draft. I will be glad for any help! Thank you!

Answer 1

You can use memory profiling.
It is possible runtime libraries. (script execution time, frames \ fps, etc.)
But against the background of the resources that are allocated to the page, comparing these cubes with a gradient (simple objects) is just a waste of time - you will not see much difference
(unless, of course, you specifically try to load the page)