20 August 2010

jQuery UI Sortable – Slow to bind

We broke down the time it took to generate a Planbox plan page and realized that all that Javascript binding was taking much of the time. Out of that time, the vast majority of the time was spent applying .sortable() to enable drag & dropping of all elements. It turns out that time is vastly reduced if we removed the connectWith option, but then user cannot drag&drop items from an iteration container to another..

By playing with this today I realized that we can save a lot of processing and time by setting the connectWith option AFTER the .sortable() is initialized!!

Before:

  $(container).sortable({
    distance: 5,
    axis:"y",
    "connectWith", '#story>.iteration_frame>.iteration_container.allowdrop'
    cancel: 'div.disabled,div.opened,div.plan_table_message'
  });

After:

  $(container).sortable({
    distance: 5,
    axis:"y",
    cancel: 'div.disabled,div.opened,div.plan_table_message'
  }).sortable( "option", "connectWith", '#story>.iteration_frame>.iteration_container.allowdrop' );
  // For whatever reason setting this option AFTER initialization saves us 4X the time!!

The bottom line?

Here are times to do JS bindings (browser is blocked for that time so it's a time the user feels!)

Plan, large page, all initiatives all items everybody,

Before: 16 935ms, 253437 calls

After: 5 617ms, 179336 calls


Work page, same selection

Before: 1200ms, 136 668 calls

After: 510ms, 39565 calls


The more sortable elements on the page the bigger the benefit!

Ticket #5886 was opened on jQuery UI to resolve this.

comments powered by Disqus