jQuery Performance Issues With Show/Hide Permalink: jQuery Performance Issues With Show/Hide Bookmark Icon

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.

Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
> Quoted text
Code blocks
// A simple code block
// Some PHP code
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!