4

I'm using tablesorter Jquery plugin to sort my tables. This works normally when the table size is less 500 rows. As the number of rows in the table grows beyond 2K or 3K, the table page loading gets very slow and also for subsequent filters based on the table data takes time to the extent that the page halts for 2-7 seconds when I type in the filter box. after few seconds, the page is back to normal with the filtered values. Is this a normal behavior with TableSorter plugin or something that has to do with my code ? Any recommendations for improving this time-lag?

1 Answer 1

4

Because of heavy (2K to 3K rows) DOM manipulation the performance decreases.

To improve the performance, I could see following possibilities.

Minimize DOM Manipulation/Access

DOM Manipulation/Access is always expensive. So, minimize that.

In the TableSorter code, unminified - line no. 337 :

for (var i = 0; i < totalRows; i++) {
    var pos = n[i][checkCell];
    rows.push(r[pos]);
    if (!table.config.appender) {
        var l = r[pos].length;
        for (var j = 0; j < l; j++) {
            tableBody[0].appendChild(r[pos][j]);
        }
    }
}

In the above code, There are two nested for loops. Let us assume we have 2K Rows and we have set table.config.appender. In the worst case appendChild may run may be more than 2K X 500 times?

This is just an example. In this place instead of appending child on every iteration, get the row string and concatenate into a result string. After all iterations, replace the text in the table. In this case, we are accessing DOM only once. This will only work if we have nothing but text in the cells and no events bound on individual cell text/elements. (Even if we want to bind events on cell text/elements, there is better way).

But this require TableSorter plugin modification.

Web Workers in Modern Browsers

While running JavaScript, UI freezes. So, in our case as we have huge amount of data, definitely it will take some notable time to process. If we move this data processing to some other thread (or run simultaneously without blocking the UI), it will be better.

For that we can use Web Workers and it is not supported in older browsers.

So, how TableSorter works? Once the table is loaded it will cache all data. Definitely it is not going to iterate on each and every row just to get the data. Once any filter is triggered, it will start processing data to sort rows. This processing can be moved to a Web Worker which will un-freeze the UI. While this is working we can show some beautiful filtering... message and meanwhile user can play around with other elements.

We can detect whether the current browser supports Web Workers or not. If yes, then we can process data in a new thread.

But this require TableSorter plugin modification.

Use Database Server

If we are pulling the data from a database and showing it in the table on the front-end, and if we have good amount of data, we can better ask server to get the sorted data from the database and show using an AJAX call.

Believe me, Database Servers are very well optimized to do these things. Also while doing an AJAX call, we can show some processing and UI will be not be frozen.

This require Server Side Programming.

These are what I am thinking of. May be I prefer using all the above three. I minimize DOM Manipulation/Access as much as possible. I use Web Workers in modern browsers. In older browsers, I depend on Database Server. Definitely it will take some time to implement.

1
  • Performance is horrible with even 1000 rows. This is on a very modern desktop. Takes 10 seconds to run the javascript to create filter headers.
    – jjxtra
    Jul 11, 2019 at 19:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.