Recently, I had to build a HTML page with 8 large tables (number of line > 150) on it. I tried 3 solutions:

• Download of the table content through AJAX call and javascript creation with table.insertRow() and row.insertCell().
• Download of the table content through AJAX call and javascript creation by creating a large string with the table content and then set a div.innerHTML content.
• Server side generation.

The results are quite surprising. From the 3 solutions, the second one is the most performing.

Before explaining in detail the difference of the 3 approaches, I should mention that using the 3rd solution, the page size was about 600K. This give an idea of the tables size.

1. AJAX and insertRow() approach

This solution works quite well. However, it has some drawbacks.

It only works on IE. Indeed, insertRow() is not standard Javascript. And the table generation is quite expansive in term of CPU load.

2. Ajax and table construction using string and innerHTML

This is the most performing approach. The table construction take half the time of the 1st approach

3. No AJAX and table construction on the server side

This really surprised me. I was expecting this approach to be the most performing not taking into account the download time. And surprisingly, this is not the case. The table rendering on the client is 2 times slower that the 1st approach and 4 times slower than the second. Why is that, I can’t really explain. Maybe, is it due to the page structure (the 8 tables are rendered in hidden div used to create tab rendering).