Do you know a utility for analyzing the processing time of individual CSS properties?

Question

css

How to determine which lines of CSS code are taking the most time to load a page? I would like to find a utility that would show me that it background-image: url('image.jpg');took so many seconds to process, for example, and based on this I would find problem areas in optimization.
Under certain conditions, page scrolling slows down a lot (jerky and slow scrolling). I'm pretty sure it's the CSS, but what exactly is causing this problem I can't figure out.
Thank you.

Answer 1

utility for time analysis. Ugh. Yes, while writing this question, everything could already be found out. hands, in a warm lamp way. I tell you:
1. delete half of the .css file by eye. scroll stopped slowing down? so the problem is in that half of the .css
2. restore the css (ctrl+z)
3. delete half of that half.....
4. ???
5. profit! in just a minute, find the line that ruins everything.
6. then delete half a line...

Answer 2

There is also such a thing as repaint.
Read:
www.html5rocks.com/en/tutorials/speed/scrolling
www.html5rocks.com/en/tutorials/speed/unnecessary-...
And here is an interesting fix:
www.thecssninja.com/javascript/pointer-events-60fps

Answer 3

There is no such thing for individual lines, because processing any CSS file of reasonable sizes takes milliseconds. You can analyze the page load speed as a whole using the Developer Tool of the Chrome browser, the Developer Tool tab:

Answer 4

Under certain conditions, page scrolling slows down a lot (jerky and slow scrolling). I'm pretty sure it's the CSS, but what exactly is causing this problem I can't figure out.

Doesn't it bother you that the browser renders the page 1 time, and not during scrolling? What does CSS have to do with it?