A table with 5000 records takes more time or 5 tables with 1000 records take more time to render in HTML

Question

I am creating a table dynamically in Jquery. Can anyone suggest me if a table with 5000 records takes more time to render or 5 tables with 1000 records takes more time to render.

Answer 1

The defining factor here isn't the structure of the html, it is how you are creating it.

Adding one element at a time in a loop will be a lot slower than building up a string of html then setting the innerHTML property once.

Answer 2

Single table with 5000 records will render faster (not significantly though), because overall html size will be smaller (less table,thead end etc tags) for one table rather than 5 tables.

But probably you don't want to output all data right away, so you might consider some table libraries like DataTables or SlickGrid. Also worth to mention that SlickGrid supports million rows.

Answer 3

it is such a open ended question as there are hundreds of outher factors will effect the result. but basically one connection to table is going to be faster that 5 different connections to 5 different tables.

Answer 4

I tried both of those but found no significant difference between those. Both are take almost same time to render.

    function createTable() {

        var cols = 4;
        var rows = 1000;
        var table = $('<table></table>').appendTo('.divPlayersGrid');
        for (var j = 0; j < rows; j++) {
            var row = $('<tr></tr>').appendTo(table);
            for (var i = 0; i < cols; i++) {

                $("<td class='CustomTemplate'><div class='CustomTemplate'><input class='autoCompleteInput typeahead' type='text' placeholder='Enter player' /></div</td>").appendTo(row);
            }
        }           

    }

Call this method from document ready 5 times and mark the time it has taken. Then change the rows = 5000 in this method and call it once from the document ready and check the time it has taken to get rendered.

The difference is negligible user can not experience that I guess.