Slow response when the HTML table is big

Question

I am using JavaScript to generate a HTML table of 4 columns, but when the table became very large (e.g. more than 1000 rows), the user could face lag between their interacti

Answer 1

Also, as in any HTML element in chrome, adding "transform: rotateX(0deg);" to the table element forces hardware acceleration to kick in, speeding up scrolling significantly (if that's the issue).

Answer 2

I find that putting a large table into a div, it's best to use a setTimeout. This seems to speed it up significantly in Chrome when storing the table in a global var first then calling the function in a setTimeout.

setTimeout("setTable(tdata)",1);

function setTable(d) {
        $("#myDiv").html(d);
}

Cheers! B55

Answer 3

The first thing that is slowing your loop down is .insertRow(). You're doing this at the top of your loop and then adding cells to it. After the row is added, and after each cell is added, the browser is doing layout calculations. Instead use .createElement() and then .appendChild() at the end of your loop.

Demo: http://jsfiddle.net/ThinkingStiff/gyaGk/

Replace:

row = tableContent.insertRow(i);

With:

row = document.createElement('tr');

And add this at the end of your loop:

tableContent.tBodies[0].appendChild(row);

That will solve your loading speed issue. As for the hover, you have way too many CSS rules affecting your tr and td elements using tag selectors. I removed a few, and used classes on a few, and the hover highlighting is much faster. Specifically, I noticed that overflow: hidden on the td elements slowed it down considerably. Consider combining some of your rules, using simpler selectors, and adding classes to elements for quicker CSS processing. During hover many things have to be recalculated by the the layout engine, and the fewer CSS rules the better. One example I saw in your code was #tables tbody tr when there was only one tbody in the table. #tables tr would have sufficed. Better than either of those is a class. I used .row in my demo.

Best practices from Google Page Speed:

• Avoid descendant selectors: table tbody tr td
• Avoid redundant ancestors: body section article (body never needed)
• Avoid universal (*) selectors: body *
• Avoid tag selectors as the key (right-most): ul li
• Avoid child or adjacent selectors: ul > li > a
• Avoid overly qualified selectors: form#UserLogin (# is already specific)
• Make your rules as specific as possible (class or id).

Answer 4

if your table has regular columns (without colspan and/or rowspan) you can improve a bit the rendering time applying the table-layout:fixed property:

MDN: https://developer.mozilla.org/en/CSS/table-layout

Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided.

Answer 5

Tables have to be downloaded and render in full before they are displayed, appearing to take a longer to display. This lapse all depends on processing power:

Are large html tables slow?

For the amount of rows you have I'm surprised you are seeing any noticeable lag, though you can try a few things from here, to help us help you out:

• remove gradient backgrounds (as they are rendered by the browser)
• paginate form data
• output form rows in chunks (say, 200 rows at a time)
• does removing all css help?
• specify a exact width + height on table rows, cells

Answer 6

If you are working with very large tables (say, 5000 or even 500,000 rows), I recommend a tiny plugin called Clusterize. You don't even need jQuery to use it. The idea is similar to lazy loading images, and it works extremely well in practice.