DataTables / DataTables/Responsive
DataTables with Responsive Plugin is over 10x slower than previous versions
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 151
- Forks
- 91
- PR merge metrics
- No merged PRs in 30d
Description
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.
Do you know the source of this performance degradation? Are there any options available to avoid it?
Thanks
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the attached DT1.10.13-R2.1.1-RR1.2.json and DT2.0.8-R3.0.2-RR1.5.json Firefox profiles, comparing the h.fn.DataTable call for a 1000+ row client-side table. Reproduce the comparison with Responsive and RowReorder enabled, then identify the regression or available option and document the result.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100