Javascript performance suffers when hiding/displaying nested tables

Question

Right now on my html page that dynamically generates about 15 different tables with about 1-15 rows in each table. When a user clicks a certain cell, a nested table appears in the row beneath. Everything appears fine and it does what it needs to do, it's just that there is about 2 second delay from when the user clicks the cell to open the nested table, to when the nested table actually displays.

Anything I can do to cut back on the time? Or any tips to alleviate this?

Light example. Granted in the actual application, there would be more tables/rows. There's no delay in this example as it is purely to show how I set things up http://jsfiddle.net/poppypoop/ZUTXT/1/

my HTML

<table>
<tr>
    <td></td>
    <td class="clickme">
        <div style="display: none;">
            <table>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
         </div>
    </td>
    <td></td>
</tr>

In this nested table I display various information in each cell for my application. Typically the nested table can have anywhere between 1 row to 10 rows

So when the user clicks the cell to display the nested table, here is the javascript that gets called

$(item).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(item).next().html() + "</td></tr>");

NOTE I am using IE10 and IE9

On Firefox 26 I don't see any delay. Which browser are you using? — Oriol
– Oriol, Commented Aug 15, 2013 at 0:15
Are you using AJAX to fetch the nested table? Either that, or the hardware you're running the browser on is complete pants — Bojangles
– Bojangles, Commented Aug 15, 2013 at 0:19
@Oriol, After seeing the way some people hack things in manually, I'd say that for many folks, using jQuery is faster. — Brad
– Brad, Commented Aug 15, 2013 at 0:20
Can you run pre-load everything on page-load and just keep it hidden? — tymeJV
– tymeJV, Commented Aug 15, 2013 at 0:24

Tom Elmore · Accepted Answer · 2013-08-15 00:37:23Z

1

Looks to me like you are getting the html content of the div that follows the button, and then inserting that after the nearest tr node.

The dom has to give you the html as a string, and then parse the string that you give it back. If you just want to show and hide rows why not just set .hide() or .show() on them? That way there is no dom manipulation which is actually quite expensive because the browser has to recalculate everything incase your new additions alter anything else. CSS changes are usually faster.

If you are getting the html from elsewhere you might want to look at that as being the bottleneck. Try using something like console.log((new Date()).getTime()) to profile different points in your code and see where the problem is.

If you can recreate the delay in your fiddle that will help people help you :)

answered Aug 15, 2013 at 0:37

Tom Elmore

1,98015 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

prawn Over a year ago

Hmm I tried recreating the problem but I couldn't mimic the delay. Even with thousands of rows. Granted in the actual application some cells have buttons in them and there is css, but that really shouldn't make a difference should it? Perhaps my work computer was just feeling sluggish.

prawn · Accepted Answer · 2013-08-15 20:19:35Z

0

It turns out there was a line forcing it to render in IE7. Once removing this, the table expansion was instant on click.

answered Aug 15, 2013 at 20:19

prawn

2,6632 gold badges36 silver badges51 bronze badges

Collectives™ on Stack Overflow

Javascript performance suffers when hiding/displaying nested tables

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related