AngularJS application se fige lors du chargement de nouvelles données à $portée
C'est probablement une question difficile à répondre car je ne suis pas sûr de ce que la racine du problème est ici, vous serais reconnaissant si quelqu'un pouvait jeter un oeil.
http://threadfinder.net/search%3FnameTags=jacket/0
Si vous continuez de faire défiler vers le bas, plus les éléments sont chargés à l'aide de ngInfiniteScroll et cette fonction:
$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;
}
});
}
}
(Je suis en utilisant AngularJS Deckgrid pour la disposition des tuiles, mais j'ai essayé de le désactiver et il n'y a pas de grand changement dans la performance.)
Si vous continuez à faire défiler, après que vous obtenez à ~300 objets chargés sur la page de la performance commence à prendre un coup et l'application se fige alors que de nouveaux éléments sont chargés en application.
Je comprends que peut-être c'est juste un fait que le chargement de toutes ces données prend une grosse charge sur la page avec tous les 27 articles chargés dans infiniteScroll GET
appel) le poids total du chargement des données est d'environ 30ko un pop, de sorte à environ 300 articles, il y a ~900 ko de données dans le champ. Ces données sont aussi peu que je peux le faire (~500 lignes de JSON).
La question est:
Existe-il des recommandations, des plugins, des directives ou des meilleures pratiques d'utilisation pour AngularJS pour lors du chargement d'un grand nombre de données dans la page $scope
?
Pour plus de précisions, l'application est construite sur Node
/ExpressJS
/MongoDB
EDIT: j'ai vérifié ce problème sur les deux ordinateurs (à la fois sur OSX) et ce problème est BEAUCOUP de plus en plus répandus dans Chrome que dans Safari. Chrome totalement chancelle lors du chargement de données dans les données, Safari est très lisse et n'a d'notable de latence lorsque vous arrivez à plus de 600 articles et même alors, il est loin d'être aussi mauvais que Chrome.
OriginalL'auteur JVG | 2013-12-08
Vous devez vous connecter pour publier un commentaire.
J'ai pris un coup d'oeil à la page avec AngularJS Batarang, et il ne semble pas que votre application est de dépenser beaucoup de temps dans le recueil de cycle. Si vous jetez un oeil à google Chrome "Timeline" du panneau pendant les périodes de l'INTERFACE utilisateur de décalage, vous pouvez voir les éléments suivants:
(full size)
La plupart du temps est passé dans beaucoup de "Parser HTML". Un rapide Google cherché tourné ce Débordement de Pile question, qui possède certaines des réponses qui peuvent être utiles; en particulier, les Groupes de post à ce sujet le manuel de concaténation de chaîne par être la peine d'essayer ici. Vous pouvez également envisager d'essayer de briser le gros bloc de HTML analyse en petits morceaux en ajoutant de nouveaux éléments à la portée de petits lots (peut-être en utilisant
$evalAsync
ou quelques fois) pour voir si cela aide.Vous pouvez prendre un coup d'oeil à le
setRepeat
directive du message lié, même si je ne suis pas sûr si c'est effectivement là où vos performances en sont issus. Nous faisons quelque chose de très similaire, également à l'aide de ngInfiniteScroll, et nous avons un léger retard lors de DOM est ajouté, mais rien d'aussi grave que ce que vous voyez; je suis aussi de ne pas voir autant de "Parser HTML" événements lorsque nous ajouter des données à la portée.OriginalL'auteur Michelle Tilley