Comments on: Now you see me… show/hide performance

By: Anna

Anna — Wed, 27 Feb 2013 11:00:35 +0000

How can I get the show(“slow”) effect if I just use $(“#elementId”).css(“display”, “”); ?

By: Jason

Jason — Mon, 20 Aug 2012 17:48:56 +0000

An oldie but goodie. Thanks so much for posting this. I was using show()/ hide() on a large list of approximately 1000 elements for filtering and it was taking 2-3 seconds. Using the direct css approach it is now between 20-50ms.

By: jQuery show “loading” during slow operation | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

Sun, 19 Aug 2012 11:21:28 +0000

[...] Using .css({‘display’:'none’}) turns out to be WAY faster than hide(), so no need for the loading animation… This article showed me the light: show/hide performance. [...]

By: Felix

Felix — Tue, 19 Jun 2012 19:14:04 +0000

Thanks a bunch for this article. In my case, a performance milestone went from average 250 ms down to 5 ms. This by changing from show()/hide() to css(“display” “block/none”).

By: blindfish

blindfish — Tue, 03 Apr 2012 13:42:48 +0000

This was really useful and confirmed a sneaking suspicion…

Re: “Also note that for the majority of use cases, all of these methods are plenty fast to use. ”

Presumably you were benchmarking on a reasonably fast computer? I’d be interested to know the performance gains these changes might result in on mobile devices and whether they’re worth implementing even when showing/hiding a relatively small number of elements (say 10 to 20). Definitely something to look into :)

By: San

San — Mon, 05 Mar 2012 17:44:07 +0000

Hi, I want to show/hide a div that is created by a plugin. I’m using an mp3 player and the playlist is visible by default, so I added a button that will serve the purpose of hidding and showing that playlist… I’ve tried with many examples and none seems to work. The only way of hide the div is by css: display:none; but then I can’t make it appear again with the button. What could I do? Thanks!

By: Jegs

Jegs — Wed, 18 Jan 2012 03:32:49 +0000

Kudos! I’m a performance OC fanatic and i would love to read more articles like these…

This site will be on my delicious.

By: On Job training pune

On Job training pune — Sat, 07 Jan 2012 09:50:24 +0000

Nice tips on jQuery. I really appreciate.

By: jQuery toggle wont work for child elements, having a hidden parent. « TechSense

Mon, 19 Dec 2011 09:19:38 +0000

[...] performance consideration, based on jQuery tutorial from learning jQuery, you can use .css(‘display’,'none’) to hide [...]

By: Matt Rohr

Matt Rohr — Thu, 15 Dec 2011 21:10:59 +0000

We were dealing with this at work and I came up with a benchmarking page to test how much this actually impacts performance.
http://mjrohr.dyndns.org/showhide.html