Question

我有一个移动应用程序。我使用Angular和Ionic，应用程序的想法是提供帖子。当用户达到Feed的70％（例如）时，我会在视图中添加新帖子。我从一开始就有5个帖子，每次附加5个帖子。即使在前5个帖子后，该应用程序仍然停留了半秒钟。如果我在达到70％时快速滚动，滚动突然停止并且应用程序停留0.5秒，然后我可以再次滚动。

这就是我实现功能的方式：

  <div>
    <div ng-repeat="post in posts">
      <div ng-include src="'js/post/post.html'"></div>
    </div>
  </div>
  <ion-infinite-scroll immediate-check="false" on-infinite="appendPosts()" distance="30%"></ion-infinite-scroll>

控制器

$scope.appendPosts = function() {
  $scope.postsFeedPage = $scope.postsFeedPage + 1;
  Home.loadPosts($scope.postsFeedPage);
};

$scope.$watch(function(){
  return Home.getPosts();
}, function () {
  $scope.posts = Home.getPosts();
});

服务

  var posts = [];

  this.getPosts = function() {
    return posts;
  };

  this.loadPosts = function(page) {
    return $http({
      url: Server.url + '/api/posts', 
      method: 'GET',
      params: {page: page, token: $rootScope.user.authentication_token }
    }).success(function (data) {
      posts = posts.concat(JSON.parse(data.posts));
    });
  };

知道问题是什么以及如何解决这个问题？如果问题出在Angular的性能上，也许我应该使用RequireJS来优化渲染过程？

Answer 1

您遇到性能问题，可以尝试一些解决方案：

One-time binding：一次性绑定增加performanc，但在无限滚动的情况下，我没有测试这是否工作/更好。请尝试以下代码：
```
 <div ng-repeat="post in ::posts">
  <div ng-include src="'js/::post/::post.html'"></div>
 </div>
```

Track by method：按方法跟踪使用唯一标识符，这可以提高性能。试试这个：

  <div ng-repeat="post in posts track by post.id">
     <div ng-include src="'js/post/post.html'"></div>
  </div>

Collection-repeat：Ionic制定了一个指令，允许应用程序显示大量项目列表，而不是ng-repeat。（编辑：这是本案的解决方案）。
```
  <div collection-repeat="post in posts">
     <div ng-include src="'js/post/post.html'"></div>
  </div>
```

应用程序在附加数据时卡住了

1 个答案: