DataTables with Responsive Plugin is over 10x slower than previous versions

[mdavidson-enr]

Recently, I upgraded my company's product to use DataTables 2+ with Responsive Plugin 3+ and RowReorder 1.5

Since then, we've received numerous complaints about slow performance. We use client-side processing, load the data into an HTML table, then initialize DataTables with those respective plugins. We give our clients the option to load all data in a single page, and that has been the source of the performance bottlenecks. Clients complaining about performance usually load 1000+ rows into a single page, as that is a days worth of data for them, so it would be ideal if they could still load it all into a single page.

I recognize this is likely not a supported use case, because I've seen the suggestions around to implement server-side processing and pagination. However, I still think this is a degradation worth exploring. Between DataTables 1.10.13, Responsive 2.1.1, and RowReorder 1.2 and their respective newer versions that we implemented, DataTables 2.0.8, Responsive 3.0.2, and RowReorder 1.5, we noticed an over 10x performance degradation for the exact same data.

We've reverted back to the older versions we were using to circumvent this performance decrease, but the newer DT features make me want to get to the bottom of this performance loss so we can utilize them.

Here are the 2 Firefox Performance Profiles for the different versions. If you find the h.fn.DataTable call in each flame graph, you'd see the older version is 790ms and the newer version is ~10,500ms.

DT1.10.13-R2.1.1-RR1.2.json

DT2.0.8-R3.0.2-RR1.5.json

Do you know the source of this performance degradation? Are there any options available to avoid it?

Thanks

[AllanJard]

I suspect that it is the more robust column width calculations. The profile shows that _resizeAuto is being called a number of times, that is where the processing time is being spent.

It would be create if you could link to a test case showing the issue so I can dig into it more.

[mdavidson-enr]

Sure.

Here's a link to the latest build with DT2: https://live.datatables.net/xaviduri/1/edit

And here is a link to the older versions we were using: https://live.datatables.net/xuhiboyi/1/edit

Both contain 1005 rows

[AllanJard]

Thanks! I'll take a look at it when I'm in the office next week.

[AllanJard]

I've made a couple of commits (1 and 2) to try and address the performance issues.

The nightly version of Responsive has these changes, and for me on my computer with this specific setup, it brings the table startup time from your DT2 example from around 8.6S down to 1.4S.

This could be further improved if pagination was used in the example, since it will significantly reduce the number of elements to clone.

Could you try the nightly in your use case and see if it shows a marked improvement in performance?

[mdavidson-enr]

Thanks for the quick turnaround! I am trying the nightly build and it does feel a bit faster, but still not quite as snappy as the older builds.

What new calculations are being done in DT 2?

Pagination is definitely on our TODO list. Maybe we'll wait to upgrade DT versions until those endpoints are ready to go

[AllanJard]

https://jsfiddle.net/eupq2jas/ - updated test case, which is a lot faster for me.