Slow Table Rendering
Slow Table Rendering
Dalder
Posts: 30Questions: 12Answers: 1
Hello again!
I have a table that tops out at about 350 rows and am noticing a fair amount of time being taken for it to render.
For the initial render I'm hiding the table behind a loading screen so there's no real issue there, but for subsequent redraws on searches or additions/deletions it can cause the whole page to lock up whilst it renders. This only lasts for about a second, but looking at other posts on the forum it would appear I shouldn't have any slowdown for this number of rows?
I am doing quite a lot of logic in the drawCallback callback, which may well be the culprit, but I'm hoping someone can shed some light on any optimisations I can make to help speed it up.
Example link is here, this is a snapshot of my current table with any sensitive information removed. This particular set of data has 260~ rows of data.
The delay I'm talking about is mainly noticeable when swapping from a filtered view back to all records.
If anyone has any further questions please let me know.
Thanks,
Dan
Replies
if you rename the callback for a moment, your table renders much faster. You probably need to examine ways to make it more efficient
Yes, I thought that might be the issue. I have already re-written the whole function once trying to make it more efficient, if anyone has any advice it would be greatly appreciated!
What is the source of the data?
The data is being bought in on the initial page load by my framework, so as far as DataTables is concerned is just standard, hard coded HTML.
I'm creating the table with the most up to date information my server has, then any subsequent changes are being made via the DataTables API when it receives information via WebSockets.
It looks like you're doing a lot of work on multiple columns in the function. The first thing I think I would do is to split each column processing off to it's own render function -https://datatables.net/reference/option/columns.render
The problem with that is that I'm not actually making any changes to the columns, simply using the data I get back to populate the additional rows I'm adding in. (Such as the daily totals and the date separators). Unless I'm mistaken, using
columns.render()won't help with that?I would suggest that you use the RowGroup extension. With it you can define two simple callbacks - the header and footer for the group, and that will give you all the information you need to create the header and footer.
Looking at the Chrome profile trace, a draw is taking 593mS on my machine, with 535mS of that in the draw callback. So it is that grouping that you want to resolve.
Also, don't add and remove event handlers in the draw callback. Just use a single delegated event handler.
Allan