I used a similar technique once to align dynamically some elements as column (no I couldn't use an array).
> I would be shocked if you can't relatively-trivially make a faster JS implementation
I'm not brave enough to do a jsperf testcase, but out of my frontend profiling experience, I would guess that his solution is significantly faster that the naive one you see in most of the case using jQuery, i.e.
- jQuery.toggle() assign inline style on each elements.
- It directly fetch values from the DOM to match nodes
- It trigger a lot of reflows
But yes, I'm like you pretty sure that a decent implementation that work on an in memory mapping of <value to match> => <DOM node>, use class toggling to show/hide element and make use of document.createDocumentFragment() beat this CSS method.
Poor javascript performance is most of the time due to excessive reflow triggering, this CSS beat naive JS solutions because it only trigger one.
Edit: oh and an issue I had at the time was that for IE8 and older you can't use element.innerHTML on a style element. You have to use element.styleSheet.cssText
Yeah, the jQuery case is kind of what I was picturing they were comparing it against, but I didn't want to say it. But reasonably-performant plain JS is pretty simple, it's just a bit different than you tend to see in jQuery-infested realms[1]. And reflows aren't that hard to understand or control, and it can also easily only do one - just do it all in a loop and don't try to read values after setting related ones.
> And reflows aren't that hard to understand or control, and it can also easily only do one
Yeah you easily get bitten by jQuery because it mix reads with writes under the hood.
I prefer to use it most of the time for browser compat / easier maintainability, but it's crazy the performance you can save by bypassing it in hotspots.
> I would be shocked if you can't relatively-trivially make a faster JS implementation
I'm not brave enough to do a jsperf testcase, but out of my frontend profiling experience, I would guess that his solution is significantly faster that the naive one you see in most of the case using jQuery, i.e.
This naive solution is slow because: But yes, I'm like you pretty sure that a decent implementation that work on an in memory mapping of <value to match> => <DOM node>, use class toggling to show/hide element and make use of document.createDocumentFragment() beat this CSS method.Poor javascript performance is most of the time due to excessive reflow triggering, this CSS beat naive JS solutions because it only trigger one.
Edit: oh and an issue I had at the time was that for IE8 and older you can't use element.innerHTML on a style element. You have to use element.styleSheet.cssText