4 ms·
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 mor
by 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 agoFirefox Developer also has a performance tab, can't remember if the normal FF build has.
- simion314 5y agoI 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 agoIf 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.