jQuery: performance of show and hide

Posted May 8th, 2010 in Javascript

Josh Powell at Learning jQuery posted an interesting post a couple of days back looking at the performance of show and hide in jQuery along with some alternatives: toggle, addClass, removeClass, setting the CSS directly and enabling/disabling the stylesheet.

My first thought when I read the post was that "what does it matter if it takes a few milliseconds longer to use one method over another" but it is important if hundreds or thousands of nodes need to be changed on a single page at once (and this can actually happen in practise).

Also important to note is that animations can be painfully slow (and noticable) in the older versions of Internet Explorer (6 & 7) which I have noticed a lot recently when I was setting up a couple of new sites that use a lot of showing and hiding. If you have to deal with these browsers a lot, even for just a few nodes on the page that need their state changed it may pay to be as efficient as possible.

It's a shame he didn't benchmark IE8 as well because it would be interesting to see how much better it is using these functions than the older versions, and how well it stacks up against the other modern browsers.

Anyway, it's a good read and concludes that enabling/disabling a stylesheet is by far the fastest (almost instant) and toggle is the slowest.

Read the article here: "Now you see me… show/hide performance"