Question

I have a page that uses jQuery tabs to tabify a set of HTML tables. We have noticed that the performance switching between tabs can be poor when the tables have large numbers (>1000) of rows.

Following some analysis it turns out that the poor performance is isolated to the $show.removeClass( "ui-tabs-hide" ); line in the tabs’ showTab function.

This was proven with a simple webpage containing a table of 20 columns and 1000 rows in a containing div element.

Suspicious of jQuery, we removed all jQuery from the page and ended up with the following pure JavaScript approach:

<style type="text/css">
    div.tableContainer
    {
        height: 500px;
        width: 800px;
        overflow: auto;
    }
    div.hidden
    {
        display: none;
    }
</style>

<script type="text/javascript">
    function showTable() {
        var x = document.getElementById("theTable");
        x.className = "tableContainer";
    }
</script>

<a href="javascript:showTable()">Show</a>
<div id="theTable" class="hidden tableContainer">
<table>
    <!-- 1000 table rows, with 20 cells each -->
</table>
</div>

The performance is still poor, taking around one second to show the table both in Firefox 5 and IE8.

Can anyone recommend a more performant approach? (other than paging of the table contents, something we might have to resort to but which will require a reworking of a lot of our code)

Answer 1

The problem is the table more than anything. 1000 TRs * however many TDs is a lot of DOM elements for the browser to re-render.

The only think I can think of to try is instead of swapping the display css property, try positioning the table off-screen instead to ‘hide’ it.

Or, alternatively, don’t hide it at all. Leave it on the page and ‘cover’ it with a DIV when you want to ‘hide’ it.

All that said, this is a gigantic table, so the real solution may be to redesign the page itself. Maybe don’t use tabs on the page, and have users launch each page in it’s own browser tab or something.