应用程序在追加数据时卡住

app stucks when appends data

本文关键字：数据 追加 应用程序      更新时间：2023-09-26

我有一个移动应用程序。我用的是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来优化渲染过程?

你有一个性能问题，有一些解决方案你可以尝试:

  • 一次性绑定:一次性绑定提高性能，但在无限滚动的情况下，我没有测试这是否有效/更好。试试下面的代码:

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

  • 按方法跟踪:按方法跟踪使用唯一标识符，这可以提高性能。试试这个:

      <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>
相关文章：