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

Question

当尝试从一个数组(带图像)渲染超过120个项目时,列表的滚动变慢.基本上,当我在无限滚动中加载新数据时,我将旧数组数据与新数组数据连接起来.

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

Answer 1

ANGULARJS中的无限滚动

不需要任何额外的插件.

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app='demo'>
  <div data-ng-controller='MainController'>
    <ul class='hello' when-scrolled='more()'>
      <li data-ng-repeat='item in items'>
        {{item}}
      </li>
    </ul>
    <div data-ng-show='loading'>Loading</div>
  </div>
</div>
<h1>INFINITE SCROLLING IN ANGULARJS</h1>

Answer 2

ngInfiniteScroll 只是一个指令,您可以使用它来实现无限滚动,它不会影响这个问题.

这里有一些加快应用程序的提示

• 尽可能避免在重复部分使用观察者

  • 使用一次性绑定: {{::model}}
  • 减少使用ng-*:所有这些都添加$ watch.
  • 减少使用$watchCollection或$watch
  • 使用ng-if而不是ng-show:它删除了dom并摧毁了观察者.
  • 使用track by:对于大型集合,这可以显着提高渲染性能.

• 在连接中:

  你可以在plunker和next命令中看到你的问题

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

  比...更好

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

但是以上所有提示都允许用户在列表中有更多项目,但是当列表中的项目数量超过(比方说1000)时,滚动会再次变慢

对于这个问题,我们可以使用Angular Material md-virtual-repeat,它只是按需加载可见项,就像我在虚拟重复中使用的那样.