Poor browser performance unhiding a large (>1000 rows, 20 columns) table

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 containin开发者_运维问答g 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)

---

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.

---

Instead of using a hidden class (which I suppose has display: none;) try hiding the table by using

position: relative;
left: -9999999px;

I know it's a hack but might work ;-)

---

Also you can try visibility:hidden instead of display:none.

---

1000 rows won't fit on the users screen (I think :) ).

So why not load rows that fit on the screen (perhaps some more) and when the user scrolls down to the end of the table add some more rows.

Like for example Twitter does.

---

The fix we decided upon in the end was to implement pagination.