新しいデータを$ scopeに読み込むときにAngularJSアプリがフリーズする

Question

これは根本的な問題がここにあるかどうかわからないので、おそらく難しい質問です。誰かが見てもらえると感謝します。

http://threadfinder.net/search%3FnameTags=jacket/0

あなたが継続的に下にスクロールする場合は、より多くのアイテムがngInfiniteScrollと、この機能を使用してロードされます

$scope.moreProducts = function() { 
     if ($scope.busy || $scope.noMore){return;} 
     else 
     if (!($scope.busy)) { 
      $scope.busy = true; 
      $scope.itemsLoaded += 27; 
      var theQuery = $routeParams.query.replace(/\?|%3f/gi, ''); 
      $scope.itemSearch.get({ 
       query: theQuery, 
       page: $scope.itemsLoaded 
      }, function(data) { 
       if (data.posts.length <= 0) { 
        $scope.noMore = true; 
       } else { 
        $scope.noMore = false; 
        for (var i = 0; i < data.posts.length; i++) { 
         if ($scope.user) { 
          if (!($scope.user.likes.indexOf(data.posts[i]._id) === -1)) { 
           data.posts[i].liked = 'http://i.imgur.com/CcqoATE.png'; 
          } else { 
           data.posts[i].liked = 'http://i.imgur.com/tEf77In.png'; 
          } 
          $scope.posts.push(data.posts[i]); 
         } 
        } 
        $scope.busy = false; 
       } 
      }); 
     } 
    } 

（私はタイルレイアウトにAngularJS Deckgridを使用していますが、私は無効に試してみましたそれはパフォーマンスに大きな変化はありません）。

スクロールし続けると、300個のアイテムがページにロードされた後、パフォーマンスが低下し、新しいアイテムがbのときにフリーズしますスコープにロードされます。

このデータの読み込みには大きな負荷がかかります.27個のアイテムがロードされるごとに（1つのinfiniteScrollコール）、ロードされるデータの総重量は約30kbですポップなので、およそ300の項目に〜900kbの範囲のデータがあります。このデータは、私が作ることができるほど少ないです（JSONの〜500行）。

質問です：

はページ$scopeに大量のデータをロードするときのためのAngularJSのための推奨事項、プラグイン、ディレクティブまたは最高使用の慣行がありますか？私は2台のコンピューター（OSXの両方）でこの問題をチェックアウトしてきたし、この問題はよりもChromeでMUCHより一般的である：

を明確にするために、アプリがNode/ExpressJS/MongoDB

EDIT上に構築されていますSafariでChromeはデータを読み込むときに完全にずれてしまいますが、Safariは本当にスムーズで、600以上のアイテムに達したときに目立った遅れがあり、それでもChromeほど悪くはありません。

Answer 1

私はAngularJS Batarangというページを見ましたが、あなたのアプリがダイジェストサイクルで多くの時間を費やしているようには見えません。

(full size)

時間のほとんどは、パースHTML」の多くに費やされている：あなたはUI遅れの期間中にChromeの「タイムライン」パネルを見てみる場合は、以下を参照してくださいすることができます" Googleが検索した素早い検索結果はthis Stack Overflow questionとなっています。とりわけ、Groupsはここで試してみる価値のある手動文字列連結についての投稿です。また、小さなバッチ（おそらく$evalAsyncまたはいくつかのタイマーを使用）でスコープに新しい項目を追加することで、HTMLパーズの大きなブロックを小さなチャンクに分割することを検討することもできます。