Hi everyone,
I've got a few issues with our Sortable performing badly. I don't know necessarily what's causing it, but it's happened over the last few months of development time. I'm hoping that I could get some insight as to possible sources of performance problems with the Kendo Sortable app. The application is too big to post Plunker code, but a general breakdown:
- Nested Sortables. Sortables for lanes, each lane has a sortable with cards in it.
- The lane definitions are pulled from a REST service and pulled locally. Stored as an array of objects (ie. [{pk:100, name: Lane1, otherfield: value...}]
- The cards are pulled from a REST service and stored locally. Stored as an object with an array of objects (ie.{100, cards:[{pk: 1, name: Card1}], 200: {...}}.
- Each card has a number of links with (click) events. The card body has a (click) event which draws a new "board".
- [ngClass] directives are used to switch CSS classes on certain elements.
- Angular Materials tooltips are defined for certain elements.
- Some cards have an embedded app that shows images, but not all of them.
- There's some embedded SVGs for things like icons.
The cards throw a dataAdd when traversing "lanes", which sets a class variable to the dataItem. There is an dragStart event, which sets a boolean. There's a dragOver event that queries for the current card being dragged (document.querySelector('div[aria-grabed="true"]') and sets its CSS class, and on dragEnd it does the same call and removes that class.
The drag animation skips and lags even when there's only a small number of items (half a dozen or so) and I'm not performing REST calls while dragging or on dataAdd, only on dragEnd.
We're running @progress/kendo-angular-sortable": "^2.0.1" and @progress/kendo-angular-common": "^1.1.0". I don't know if there's massive performance improvements in later versions, but maybe I could get some insight?
Thank you all very much.
1 Answer, 1 is accepted
Hello Chris,
While there certainly are some browser- and system- specific thresholds (significantly lower for IE) for the number of items that can be rendered and handled simultaneously on the page after which the performance will degrade, the described scenario does not sound like something that should cause a performance issue in isolation.
From the provided code it seems that the DragStart and DragEnd events are used to attach and remove a custom class to the dragged element via direct DOM manipulation. Querying and manipulating the DOM in general, and in an event handler that is fired multiple times in short succession in particular (like the DragOver event) is not advisable and will likely cause undesired side effects. I can suggest using the activeItemClass/Style input to provide the desired styling to the element that is being dragged:
https://www.telerik.com/kendo-angular-ui/components/sortable/api/SortableComponent/#toc-activeitemclass
Some generic advice on performance might include enabling the production mode of the application, and avoiding scenarios where events, triggered by one component/element triggers the change detection of other components/elements on the same page. This typically achieved by wrapping various sections of the page in components with OnPush ChangeDetectionStrategy, not using calling time consuming functions in templates, etc.:
https://netbasal.com/optimizing-the-performance-of-your-angular-application-f222f1c16354
https://blog.mgechev.com/tags/performance/
https://www.youtube.com/watch?v=WP-d5CCuS60
https://www.youtube.com/watch?v=ybNj-id0kjY
https://blog.angular.io/3-tips-for-angular-runtime-performance-from-the-real-world-d467fbc8f66e
However, half-a-dozen (or even several dozens) items should not impose significant performant penalty under normal conditions. I prepared an example that features nested observables, and custom styling being applied to the one being dragged, and it seems to be working as expected:
https://stackblitz.com/edit/angular-udi8oe?file=app/app.component.ts
Even adding custom logic for removing the activeItemClass from the element on drop, the performance is still fine:
https://stackblitz.com/edit/angular-udi8oe-lodrky?file=app/app.component.ts
The specified versions seem recent enough and there are no more recent versions where Sortable performance was explicitly improved.
Can you please try to replace the DragOver handler with the suggested workaround, and let us know whether the problem is still present with a limited number of items? If so, please send us an isolated runnable project or a Stackblitz demo where the issue can be observed, so we can inspect it further, and try to suggest an optimization. Thank you in advance.
Regards,
Dimiter Topalov
Progress Telerik