3 ms·

CSS animation look cool but do we have a way to debug css performance issues? Last time when I had to fix this I found not tool so the solution was look at the

CSS animation look cool but do we have a way to debug css performance issues? Last time when I had to fix this I found not tool so the solution was look at the CPU usage and remove the elements you think are problematic until CPU usage goes to 0%. Is super easy for someone to screw things up and cause a 25% CPU usage and not notice it on his dev machine. After this incident my rule is to always triple check in code reviews any animation that has "infinite" in it (though I am mostly a backend dev)

Etheryte 5y ago
Chrome devtools have a Performance tab that's extremely useful for this, as well as other performance issues. It includes repaint information, CPU usage and more, and makes it relatively easy to find the culprit. That said, as a frontend developer I very much agree that CSS animations are a great footgun. A testament to this is running into laggy and slow animations on random webpages, oftentimes ones owned by big companies. Of course, they can be done well too, but not without great care.
- bryanrasmussen 5y ago
  Firefox Developer also has a performance tab, can't remember if the normal FF build has.
- simion314 5y ago
  I know about that tool, but for JS you can dig and find the hot spots with painting operations you could not find what css triggered them. I could use them to identify JS code that did too much DOM changes and optimize them though.
  - Etheryte 5y ago
    If you make a performance recording of the page, you can then select the main thread, open event log, and filter by "Layout". You won't get a summarized overview, but you can see the layout root for each entry, which will show you what caused the layout update. For complex pages with numerous parallel animations, you might need to filter this data more, but for example in the article we're discussing right now, manual checking quickly reveals where the layout updates are coming form.

Etheryte 5y ago

Chrome devtools have a Performance tab that's extremely useful for this, as well as other performance issues. It includes repaint information, CPU usage and more, and makes it relatively easy to find the culprit. That said, as a frontend developer I very much agree that CSS animations are a great footgun. A testament to this is running into laggy and slow animations on random webpages, oftentimes ones owned by big companies. Of course, they can be done well too, but not without great care.

bryanrasmussen 5y ago
Firefox Developer also has a performance tab, can't remember if the normal FF build has.
simion314 5y ago
I know about that tool, but for JS you can dig and find the hot spots with painting operations you could not find what css triggered them. I could use them to identify JS code that did too much DOM changes and optimize them though.
- Etheryte 5y ago
  If you make a performance recording of the page, you can then select the main thread, open event log, and filter by "Layout". You won't get a summarized overview, but you can see the layout root for each entry, which will show you what caused the layout update. For complex pages with numerous parallel animations, you might need to filter this data more, but for example in the article we're discussing right now, manual checking quickly reveals where the layout updates are coming form.