Performance: Could we somehow group layout actions?

Detects are currently free to cause layout reflows whenever they like – which can be a lot, as demonstrated by @hexalys here: https://twitter.com/hexalys/status/432827905307983873

Is there some way we could cleverly group these together to reduce the number of reflows?

e.g. testStyles() could just register the styles it needs to test against, then when all detects have been run through, the elements & styles for all detects using testStyles() are added to the DOM at once, and their callback functions are then executed in turn.

Side effects:

• The call to Modernizr.addTest() for these detects would have to consistently appear within the callback function – as testStyles() itself would no longer have a return value – but many already do this
• Rather than always using a #modernizr element, each detect would have to have its own namespace, e.g. #modernizr1, #modernizr2 etc
• We’d have to be careful to ensure this all still happens synchronously, but I think that’s doable

[ryanseddon]

I still think it would be interesting to try window.flushTests() in a requestIdleCallback as you still want to avoid running it if the thread is doing more important stuff.

[ryanseddon]

Amazing this is great stuff @aFarkas.

I just did a test with requestIdleCallback on a local copy of nytimes by remapping Modernizr.testStyles to _ => requestIdleCallback(injectElementWithStyles) I have a timeline here but it’s hard to dig into what it’s doing.

I think your idea has a lot more promise (pun intended).