Question

尝试从阵列中渲染120多个项目（带图像）时，列表的滚动会变慢。基本上，当我在无限滚动中加载新数据时，我将旧数组数据与新数组数据连接起来。

另一方面，像dribbble，behance这样的热门网站似乎没有这个问题。也许这个问题特定于Angular.js？有人在他们的项目中遇到过这个问题吗？

Answer 1

ANGULARJS中的无限滚动

无需任何其他插件。

output$smaller_category

app = angular.module("demo", []);

app.controller("MainController", function($scope, $http){
  
  // the array which represents the list
  $scope.items = ["1. Scroll the list to load more"];
  $scope.loading = true;
  
  // this function fetches a random text and adds it to array
  $scope.more = function(){
    $http({
      method: "GET",
      url: "https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1"
    }).success(function(data, status, header, config){
      
      // returned data contains an array of 2 sentences
      for(line in data){
        newItem = ($scope.items.length+1)+". "+data[line];
        $scope.items.push(newItem);
      }
      $scope.loading = false;
    });
  };
  
  // we call the function twice to populate the list
  $scope.more();
});

// we create a simple directive to modify behavior of <ul>
app.directive("whenScrolled", function(){
  return{
    
    restrict: 'A',
    link: function(scope, elem, attrs){
    
      // we get a list of elements of size 1 and need the first element
      raw = elem[0];
    
      // we load more elements when scrolled past a limit
      elem.bind("scroll", function(){
        if(raw.scrollTop+raw.offsetHeight+5 >= raw.scrollHeight){
          scope.loading = true;
          
        // we can give any function which loads more elements into the list
          scope.$apply(attrs.whenScrolled);
        }
      });
    }
  }
});

li{
  display:block;
  list-style-type:none;
  margin-bottom: 1em;
}

ul{
  height:250px;
  background: #44E394;
  color: #fff;
  overflow:auto;
  width:550px;
  border-radius: 5px;
  margin:0 auto;
  padding: 0.5em;
  border: 1px dashed #11BD6D;
  &::-webkit-scrollbar{
    width:8px;
    background-color:transparent;
  };
  &::-webkit-scrollbar-thumb{
    background-color:#b0fccd;
    border-radius:10px;
  }
  &::-moz-scrollbar{
    width:8px;
    background-color:transparent;
  };
  &::-moz-scrollbar-thumb{
    background-color:#b0fccd;
    border-radius:10px;
  }
  &::-ms-scrollbar{
    width:8px;
    background-color:transparent;
  };
  &::-ms-scrollbar-thumb{
    background-color:#b0fccd;
    border-radius:10px;
  }
}

body{
  text-align:center;
  font-size:1.2em;
  font-family: "Helvetica";
  color: #44E394;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2P88OHDfwY0wAgSFBAQYEQWp1AQAKUbE9XRpv7GAAAAAElFTkSuQmCC) repeat;
  padding: 2em;
}

Answer 2

ngInfiniteScroll只是一个可以用来实现无限滚动的指令，它不会影响这个问题。

以下是加快应用程序的一些提示

尽可能避免在重复部分使用观察者
- 使用一次性绑定：{{::model}}
- 使用ng-*减少：所有这些都会添加$ watch。
- 使用$watchCollection或$watch
- 使用ng-if代替ng-show：它会删除dom并销毁观察者。
- 使用track by：对于大型集合，这可以显着提高渲染性能。

在连接中：

您可以看到your problem in plunker和下一个命令

    [].push.apply($scope.list,getNewList());

优于

    $scope.list=$scope.list.concat(getNewList());

但上述所有提示都允许用户在列表中包含更多项目，但当列表中的项目数量超过（比方说1000）时，滚动会再次变慢

对于这个问题，我们可以使用Angular Material md-virtual-repeat，它只是按需加载可见项目，就像我在your problem with virtual repeat中使用的那样。

Answer 3

我认为您应该考虑优化您的应用程序，而不仅仅是选择更好的指令或插件，太多的范围也会降低应用程序的速度。

长数组列表渲染使Angular.js中的页面滚动速度变慢

3 个答案: