How to debug slow .columns.adjust()?
How to debug slow .columns.adjust()?
Hi. I haven't been able to make a minimal reproducible example, so far. The problem I'm facing is that calling table.columns.adjust()
gets slow.
Observations
- Each next call is slower that the previous one.
- The more rows I have in the table, the slower it gets.
Measurements
I measured the time it takes for an adjust()
call with different number of rows in the table. I called adjust()
multiple times, not doing anything in between the calls. Each line is the time it takes for the next call.
10k rows
1) 15s
2) 50s
5k rows
1) 3s
2) 12s
3) 20s
4) 31s
1k rows
1) 0.1s
2) 0.4s
3) 0.7s
4) 1.3s
5) 1.6s
6) 1.9s
7) 2.2s
8) 2.7s
Datatable init
DataTable({
select: {
style: "multi+shift"
},
searching: true,
scrollX: false,
data: [],
deferRender: true,
processing: true,
rowId: "uid",
language: {
url: "datatables_x.json"
},
pageLength: 50,
lengthMenu: [10, 50, 100, 500],
fixedHeader: true,
dom: 'rt<"float-start clearfix"l>p',
order: [[7, 'desc']],
columnDefs: [
{
target: '_all',
className: 'dt-center',
orderSequence: ["desc", "asc"],
}
],
columns: [...]
})
Additional info
"datatables.net": "1.13.8"
Google Chrome
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
I just tried it with 5k rows and the latest releases, see here, and it takes less than a second consistently. I'd suggest updating your code base to the most recent libraries (you are on 1.x rather than the new&improved 2.x version), and see if that problem still occurs for you.
Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.
Colin
Hi, Colin.
I was able to track down the issue. In my case, calling
columns.adjust()
caused all rows to re-render (even the ones that are not visible). And since one of the columns had to do some relatively heavy stuff in itsrender
function, I was seeing the described effect.Surprisingly, I could not reproduce this in a minimal example (see my attempt here). The rows don't get re-rendered if you press the "Adjust" button at the top.
For now, I simply removed the heavy code from the
render
function of the problematic column, and so it no longer causes the huge lag.Thanks for the update. Yes, it is important to keep the rendering function as light as possible since it can be called quite frequently. Good to hear you got to the bottom of it - nice one!
Allan