hide/show are *very* slow

Question

I'm currently using the hide/show functions in jQuery to help filter a table into groups from a select box.

The actual code works fine, but is incredibly slow, sometimes taking a minute or two to execute.

I switched the code so instead of hide() and show() it uses css({'display':'none'}); and css({'display':'block'}); - the speed difference is simply incredible, it now takes just seconds, but in Firefox the table data is all squashed for each row.

This isn't the end of the world since here we almost exclusively use Internet Explorer, but I was still wondering if there's a way around it since a fair amount of people (myself included) do use Firefox.

Answer 1

In firefox to show/hide a table row you have to set the follwoing.

//To show
$("tr").css("display", "table-row");

//To hide
$("tr").css("display", "none");

Answer 2

The answer that mentions the duration for show() and hide() is good. However, if you have too many rows, the difference between show() and display: block or display: table-row is that show() runs an animation for each row. This can definitely get slow, especially so on larger tables.

If you're really trying to squeeze out performance, try looking at the source code for jqGrid or SlickGrid. The latter one has an insanely fast filtering function that would definitely work. If that's too involved for you, just go with display: block or display: table-row and display: none. You can even create your own jQuery plugin that does showFast and hideFast so you don't have to repeat that code.

Answer 3

The jQuery API specifies a duration can be set for the .show and .hide functions. I suspect that when you set this it may solve your problem.

See the docs for .show().

See the docs for .hide().