DataTables / DataTables/Responsive

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

Open
#130 6 comments 0 reactions 0 assignees View on GitHub

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.

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.