Scrolling is not smooth

[patrickliechty]

I have a table that has 53 rows and 22 columns. I hooked up vs-repeat and it works great. It took off seconds to load the table. It has a lot of bindings. But the scrolling is not smooth as it brings in new rows as you scroll. We tried it in 2 different scenarios with a lot of data and saw the same issue.

[kamilkp]

Thats a tradeoff you'll have to accept unfortunately. It has to render as you scroll. Do you have an idea how to improve it?

Kamil Pękala

Dnia 05.01.2016 o godz. 23:57 Patrick Liechty [email protected] napisał(a):

I have a table that has 53 rows and 22 columns. I hooked up vs-repeat and it works great. It took off seconds to load the table. It has a lot of bindings. But the scrolling is not smooth as it brings in new rows as you scroll. We tried it in 2 different scenarios with a lot of data and saw the same issue.

— Reply to this email directly or view it on GitHub.

[patrickliechty]

Can you add say 3 rows on either side so they are already in the dom and ready to scroll?

[kamilkp]

I am already doing so, it can be controlled via vs-excess attribute.

Kamil Pękala

Dnia 06.01.2016 o godz. 18:19 Patrick Liechty [email protected] napisał(a):

Can you add say 3 rows on either side so they are already in the dom and ready to scroll?

— Reply to this email directly or view it on GitHub.

[FlavorScape]

I believe it. I've tried binding and unbinding data in angular manually, and noticed that DOM appending and binding step is quite slow.

[kamilkp]

If only it was possible to do the rendering in a background thread somehow...

[astap111]

you can try to figure out hot to make such a behaviour from that library: https://material.angularjs.org/latest/demo/virtualRepeat

[decklord]

Something that worked really well for one of my projects was to add throttling to the calculations. On this case, the idea is to make scroll calculations just every X milliseconds while scrolling instead of doing it on every pixel movement. A way to implement this, from ngInfiniteScroll is the following:

    if (THROTTLE_MILLISECONDS != null) {
      handler = throttle(handler, THROTTLE_MILLISECONDS);
    }

The throttle method acts as a "decorator" and it's implemented this way:

    # The optional THROTTLE_MILLISECONDS configuration value specifies
    # a minimum time that should elapse between each call to the
    # handler. N.b. the first call the handler will be run
    # immediately, and the final call will always result in the
    # handler being called after the `wait` period elapses.
    # A slimmed down version of underscore's implementation.
    throttle = function(func, wait) {
      var later, previous, timeout;
      timeout = null;
      previous = 0;
      later = function() {
        var context;
        previous = new Date().getTime();
        $interval.cancel(timeout);
        timeout = null;
        func.call();
        return context = null;
      };
      return function() {
        var now, remaining;
        now = new Date().getTime();
        remaining = wait - (now - previous);
        if (remaining <= 0) {
          clearTimeout(timeout);
          $interval.cancel(timeout);
          timeout = null;
          previous = now;
          return func.call();
        } else {
          if (!timeout) {
            return timeout = $interval(later, remaining, 1);
          }
        }
      };
    };

[vance]

it's much easier to just do

var t = 0;
draw = ()=>{
  t++;
  if( t %5 ==0){
     //calculate every 5th event
  }
}

you don't incur the timeout overhead.

I've also used ui-grid to success.