jQuery Performance Issues With Show/Hide
published on
The other day I had to work on an order form which I needed to hide and show groups of rows depending on group selection. The first approach was to just use jQuery's show/hide functions. The table had about 300 rows of data and it turned out that the showing and hiding at about 3 seconds per click was way too slow.
I searched for known performance problems with show/hide and came across a very helpful article on this:
Now you see me… show/hide performance
After reading through the article, I swapped the show/hide function in favour of .css({'display':'none'}) & .css({'display':'table-row'});, which led to a drastically improved performance, showing and hiding of rows this way was almost instant.
It's always worth considering and trying out different approaches, which might result in much better performance and an improved user experience.