Performance on DataList and switching dynamically its items

edited April 2015 in Enyo 2.5
Hello, I have many Controls containing fittable columns with input fields. These Controls are used as listitems in a DataList but have performance issues while scrolling the list or resizing the window. Any thoughts how I could improve its performance?

One thought is instead of inputs, to show their values as static text, but in case a row is selected then replace it dynamically with input fields. Would that help and is it possible to do so in a DataList?



  • edited April 2015
    CSS is definitely much more performant. You could also try switching to a native scroll strategy if your devices allow it, I have found native scrolling to be much, much faster than javascript-based scrolling. This was particularly noticable on mobile devices.

    Also, you can use the profiler in chrome devtools to see if there are any items causing repaints during scrolling. I have had scrollers reduced from butter-smooth to stuttering garbage due to css animations triggered by hover styles on input elements.

    In my case, I created a mixin that uses javascript to apply a hover class rather than using the :hover selector. By leaving it up to javascript to trigger hover styles I could prevent them from getting applied when the scroller was scrolling. The result was no more repaints and a butter smooth 60fps scrolling experience.

    If you're interested I can supply a modified Scroller kind that creates scrollStart and scrollStop events - also for native scrollers - and a HoverSupport mixin that uses these scrollStart and scrollStop events and some mouse events to apply and remove a hover class.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!