Ask HN: Tools for detailed profiling of web reflows?
Chrome has really great tools for profiling JavaScript, but actual reflows of styles/layout are hidden within big purple boxes that just say "Layout". You can see what JS code triggered the reflow, but you can't see:
- How costly the CSS selectors are to apply
- Where page weight is concentrated
- Which elements are actually being recomputed
- Which groups of elements have the most complex, cascading layout behaviors
Etc.
Does anyone know of a tool (Chrome extension perhaps?) that lets you look into this? I've been searching and can't find one. It's frustrating when reflow becomes my bottleneck, and the only conventional advice is "reduce the number of elements on the page and simplify your selectors, I guess". I have no way of knowing how much benefit, if any, would come from a given optimization strategy, which makes it hard to justify taking the time to do it.