Displaying a Big HTML Table

tl;dr - To speed up loading a large HTML table on the client, start with the table CSS set to display: none;. Once the document is ready, set it back to display: table;. This reduced my client-side render time from 60 seconds to 6 seconds on a table with ~400,000 cells.

I recently had a need to build a large-ish HTML table of data (5,000+ rows and ~75 columns) and display it on a page.

The data was coming from a MySQL table and I was using PHP to feed the data out to the page. The actual query was quick and the PHP ran as fast as you might expect (pretty snappy).

The problem was the rendering on the client side.

I actually decided to use the wonderful DataTables project for easy manipulation of the table (it’s been quite nice to use - definitely check it out). Once loaded it’s extremely snappy! The problem was that before we could really do anything with DataTables I needed to load up the actual table to be used.

PHP buffered the output fine and with a little examination of the traffic I realized that the data was being delivered timely enough. It turned out that the big slowdown was the re-flow of the table as data was being parsed in the client.

There was advice out there to make the table have a fixed layout in order to speed up rendering.

.fixed-table {
    table-layout: fixed;
}

This is supposed to help by keeping the column width calculations fixed rather than requiring all of the table data first, then calculating the columns. This is what the default table-layout: auto; is supposed to do.

The problem: I wasn’t really seeing any improvement in rendering times. For reference, my 300,000 cell table was taking approximately 60 seconds to fully render. Even with the table-layout: fixed; (and setting values for column widths manually).

I hunted around for possible solution for a while until I found an innocuous comment on Stack Overflow that reminded me that any DOM elements set with display: none; are not in the render tree for the browser. So we could have the browser calculate sizes for the table outside of the render tree, then push the final results to the screen once we’re done.

I set the table to display: none; initially and once the document was ready I set it back to display: table; (relying on JavaScript to do this).

The page now loads in about 6 seconds (approximately 10X faster)!