In AppSignal we have the "event tree": a list of actions associated with a request and their performance, broken down into sub actions. It looks like this:
When there are a lot of similar events on the same level, we show only one plus a "show n similar events" link. There can be a lot of similar events; we found out about our slowness when we had to hide and show 547 of them. For this we initially used jQuery's
toggle(), which took about 5 seconds to toggle the visibility of these 547 list items we targeted by class name.
querySelectorAll('.foo') for better performance. It's supported by all modern browsers and IE8+, which is fine for our app, bypassing jQuery's cross browser compatibility code. We could have used
getElementsByClassName('foo') instead, which has about the same performance but limits browser support to IE9.
While we noticed performance improved significantly by simply using this feature, nothing beats a jsPerf test. This one was created to test the performance of toggling the visibility of 500 list items using jQuery's
Don't try doing this with jQuery. It's a great library, but there's a price to pay for the overhead. Consider not using it if you don't have to.