L'applicazione AngularJS si blocca quando si caricano nuovi dati su $ scope

Question

Questa è probabilmente una domanda difficile a cui rispondere poiché non sono sicuro di quale sia il problema di root, apprezzerei comunque qualcuno che desse un'occhiata.

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

Se si scorre continuamente verso il basso, più elementi vengono caricati nel usando ngInfiniteScroll e questa funzione:

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

(sto usando AngularJS Deckgrid per il layout di piastrelle, ma ho provato a rendere invalido

Se continui a scorrere, dopo aver ottenuto ~ 300 elementi caricati sulla pagina, le prestazioni iniziano a colpire e l'app si blocca mentre i nuovi elementi sono b eing caricato nel campo di applicazione.

Capisco che forse è solo un dato di fatto che il caricamento di tutti questi dati richiede un grosso carico sulla pagina: ogni 27 articoli caricati in una chiamata infinitaScroll GET il peso totale dei dati caricati è di circa 30kb un pop, quindi in circa 300 articoli ci sono ~ 900kb di dati in ambito. Questi dati sono il minimo che posso fare (~ 500 linee di JSON).

La domanda è:

Ci sono delle raccomandazioni, plugin, direttive o best-practice per uso AngularJS per quando si carica un sacco di dati nella pagina $scope?

Per chiarimenti, l'app è costruita su Node/ExpressJS/MongoDB

EDIT: Ho controllato fuori questo problema in due computer (entrambi su OSX) e questo problema è MOLTO più prevalente in Chrome di in Safari. Chrome si sbalordisce completamente durante il caricamento dei dati, Safari è davvero fluido e ha solo un ritardo notevole quando si arriva a oltre 600 articoli e anche in questo caso non è neanche lontanamente peggio di Chrome.

Answer 1

Ho dato un'occhiata alla pagina con AngularJS Batarang e non sembra che la tua app passi molto tempo nel ciclo di digestione. Se si dà un'occhiata al pannello "Timeline" di Chrome durante i periodi di interfaccia utente lag, è possibile visualizzare il seguente:

(full size)

La maggior parte del tempo viene speso in un sacco di "Parse HTML ". Una ricerca rapida di Google ha restituito this Stack Overflow question, che ha alcune risposte che potrebbero essere utili; in particolare, i gruppi post sulla concatenazione manuale di stringhe valgono la pena provarci qui. Si può anche considerare di provare a suddividere il grande blocco di analisi HTML in blocchi più piccoli aggiungendo nuovi elementi all'ambito in piccoli lotti (forse usando $evalAsync o alcuni timer) per vedere se questo aiuta.