提高纳克-重复1600项的性能。导致页面加载延迟和性能问题

Question

我有一个具有完美滚动条的UI布局来呈现一个项目列表。在可滚动部分中，我需要显示1600项(不限制用任何分页显示的项目数量)，以便用户可以一次滚动所有项目(这是我的要求，而我对此的控制较少)。

呈现此视图的角模板如下所示：

<my-scrollable-section>
    <div 
        ng-class="myCtrl.itemId == item.itemId ? 'item-active-background' : ''"
        ng-click="myCtrl.itemClickHandler(item)"
        ng-repeat="item in myCtrl.items | filter:myCtrl.search track by item.itemId">
            <span>{{item.name}}</span>
            <div ng-repeat="(key, value) in ::item.models">
                <span>{{::value}}</span>
            </div>
            <div ng-repeat="(key, value) in ::item.frameworks">
                <span>{{::value}}</span>
            </div>
    </div>
</my-scrollable-section>

此重复中的筛选器链接到此视图上方的搜索栏，以缩小正在显示的项。

现在的问题是：

1. 页面不会瞬间加载并冻结5-8秒.观察者的数量并不是造成这种情况的原因，因为我尝试过一次绑定，将观察者计数降低到1500以下。
2. 一旦页面加载，滚动是非常缓慢的，似乎对用户一点也不友好。
3. 我试图建议分页来限制一次呈现的项的数量，但正如前面提到的，我对需求几乎没有控制，并且要求所有项目都出现在可滚动列表中。

这些负载和性能问题能用角度来解决吗？请不要建议无限滚动，就像我们使用无限滚动，在最后，一旦所有的项目在页面上，用户界面将再次变得缓慢。

Answer 1

//试用，上滚动调用函数&更新renderLimit值。

查看这里的示例- 柱塞演示

// set initial limit to say 30.
$scope.renderLimit = 30;
// bind this function with directive.
$scope.updateLimit = function(value){
  if(value == 'bottom'){
    $scope.contValue += 1;
    $scope.renderLimit += 30;
  }
};

// directive will be
// custome directive for scrollHandler
app.directive('scrollHandler', function(){
  return{
      scope: { 
             scrollHandler: '&',
             dataChange:'='
         },
      link:function(scope,element){

          scope.$watch(function(){return scope.dataChange;},function(){
              if(element[0].scrollTop > (element[0].scrollHeight - element[0].clientHeight - 50))
                element[0].scrollTop=(element[0].scrollHeight - element[0].clientHeight - 50);
          });
          element.bind('scroll',function(){
              var scrPosition = element[0].scrollTop;

              if(scrPosition === 0)
                 scrPosition = "top";
              else if(scrPosition === (element[0].scrollHeight - element[0].clientHeight))
                 scrPosition = "bottom";
              scope.$apply(function() {
                 scope.scrollHandler()(scrPosition);
               });
          });

      },
      restrict:"A"
  };
});

HTML:：

<div scroll-handler="myCtrl.updateLimit" data-change="contValue">
    <div 
            ng-class="myCtrl.itemId == item.itemId ? 'item-active-background' : ''"
            ng-click="myCtrl.itemClickHandler(item)"
            ng-repeat="item in myCtrl.items| limitTo:renderLimit | filter:myCtrl.search track by item.itemId">
      // item contents...
    </div>
</div>

Answer 2

你查过vs-重复了吗

我一直在使用这个api来处理大量要重复的项目。我也没遇到任何问题。

只是一个简单的：

<div vs-repeat> <div ng-repeat="item in someArray"> <!-- content --> </div> </div>

就能解决你的问题。