CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
kamilws
kamilws

Reputation: 171

AngularJS and improving Performance on ul list

I've got html code like this one given below:

<div id="serviceselection" style="height:360px;" class="divClass">
  <ul id="servicesul" ng-click="setSelectedNb(this);selectNb(na)"
      data-ng-repeat="na in sernb | filter:searchNb track by na.serviceNumber"        
      style="list-style:none; margin-left:-30px;font-weight:300; overflow-x: hidden;" 
      class="{{selected}}">
    <li style="width:50px;float:left; margin-bottom:5px;">
        {{na.serviceNumber}}
    </li>
    <li style="width:370px;float:left;margin-left:10px; margin-bottom:5px;">
        {{na.description}}
    </li>
  </ul>
</div>

and on the controller side I invoke function which returns a data array containing around 8k records. I return data in this way below:

$scope.loadIvr = function () {
   if ($scope.sernb.length == 0) {
        var promise = dataservice.getServiceNumbersIVR();

        promise.then(function (payload) {
          $scope.sernb = payload.data;
        }, function (errorPayLoad) {
          $log.error('failure to load moderation ivr numbers', errorPayLoad);
        });
}};

Actually the way of retreiving data doesn't matter because it's really fast. The problem is somewhere in ul list on html. List renders like 15 seconds... it's really slow. Im using internet explorer profiler and it says that requestAnimationFrame takes a few seconds.

Any ideas how to improve performance on this ? maybe changing ul li list in favour of something else?

Upvotes: 0

Views: 52

Answers (1)

skornous
skornous

Reputation: 71

Seems to me like you are overloading your DOM with this 8k li and that it is your browser that takes time to render it. Maybe should you try to load a number of row at a time in your browser instead of the 8k as soon as they come up.

Upvotes: 1

Related Questions