Sorting Performance

[markibanez]

Picking up from #366 what do you recommend for sorting? On my end, at least with the code I wrote, sorting is way slower than the initial rendering. I tried two approaches.

Approach 1: Sorts array then refresh with $.observable(array).refresh(sorted);

Approach 2: Iterate array and move items around as we sort using $.observable(array).move(...)

Not sure if there's any other way to sort. 🤔

[Paul-Martin]

As I mentioned in the other issue - using refresh results in the existing nodes being disposed, which ultimately calls jQuery.cleanData, which is brutally slow. Then the new data is rendered. In my experience that means a refresh will take 1.5-2x the initial render time. If thats roughly what you're seeing (excluding your own sort time), then that is pretty much what you can expect. At that point you're left to do something like Boris suggested - render the initial 50 or so sorted rows, and then use something like setInterval to render the remaining rows in increments so that the browser remains responsive, yet the user doesn't have to wait for the entire table to be rendered.

[BorisMoore]

With the new update I am working on (84) Approach 1 will no longer involve any calls to cleanData, and will simply shuffle the tr's (and update #index properties etc.).

I just tested it in Chrome with your full data, and I get: 2.17 seconds initial render 1.54 seconds sort

(Sorting on City):

var sorted = model.Entries.slice().sort(function(a, b) {
  return a.f2.value.localeCompare(b.f2.value);
});

Approach 2 will work fine too, but Approach 1 in fact uses .move() internally - so for you Approach 1 is simpler.

If you are interested you can try with my current working copy here: jsviews.zip

But bear in mind it is not yet full tested, and there is some work in progress within it, in other areas. Also some breaking changes, so you may not be able to run with it without the documented changes...

[markibanez]

Thank you!

[BorisMoore]

I plan to provide for async deferred data-linking after V1. See https://github.com/BorisMoore/jsviews/issues/368.

[markibanez]

Can't wait for the next version :smile: