7 Tipps zur Leistungsoptimierung AngularJS_AngularJS

Als hervorragendes Web-Framework kann AnglarJS den Aufwand der Front-End-Entwicklung erheblich vereinfachen. Sebastian Fröstl erklärte kürzlich in einem Blogbeitrag „AngularJS Performance Tuning for Long Lists“, dass AnglarJS bei der Verarbeitung großer Listen mit komplexen Datenstrukturen sehr langsam läuft. Er teilte auch die Lösung in dem Artikel mit. Nachfolgend finden Sie eine Übersetzung des Artikels.

AnglarJS ist großartig, läuft aber sehr langsam, wenn es um große Listen mit komplexen Datenstrukturen geht. Dies ist ein Problem, auf das wir bei der Migration der Kernadministrationsseite zu AngularJS gestoßen sind. Diese Seiten sollten bei der Anzeige von 500 Datenzeilen reibungslos funktionieren, aber die Renderzeit der ersten Methode dauerte erschreckende 7 Sekunden.

Später stellten wir fest, dass es während des Implementierungsprozesses zwei Hauptleistungsprobleme gab. Eine davon bezieht sich auf die „ng-repeat“-Direktive und die andere auf Filter.

Im Folgenden teilen wir unsere Erfahrungen bei der Lösung von Leistungsproblemen mit verschiedenen Methoden und hoffen, Sie inspirieren zu können.

　1. Warum wird ng-repeat in AngularJS langsamer, wenn große Listen verarbeitet werden?

ng-repeat in AngularJS wird langsamer, wenn mehr als 2500 bidirektionale Datenbindungen verarbeitet werden. Dies liegt daran, dass AngularJS Änderungen mithilfe der „Dirty-Checking“-Funktion erkennt. Jede Prüfung nimmt Zeit in Anspruch, sodass große Listen mit komplexen Datenstrukturen Ihre Anwendung verlangsamen.

　2. Voraussetzungen zur Leistungssteigerung

Zeiterfassungsbefehl

Um die Zeit zu messen, die zum Rendern einer Liste benötigt wird, haben wir ein einfaches Programm geschrieben, um die Zeit mithilfe des Attributs „$last“ von „ng-repeat“ aufzuzeichnen. Die Zeit wird im TimeTracker-Dienst gespeichert, sodass die Zeiterfassung vom Datenladen auf der Serverseite getrennt ist.

// Post-Repeat-Direktive zum Protokollieren der Renderzeit angle.module('siApp.services').directive('postRepeatDirective', ['$timeout', '$log', 'TimeTracker', function($timeout, $log, TimeTracker) { return function(scope, element, attrs) { if (scope.$last){ $timeout(function(){ var timeFinishedLoadingList = TimeTracker.reviewListLoaded(); var ref = new Date(timeFinishedLoadingList); var end = new Date(); $log.debug("## DOM-Rendering-Liste: " (end - ref) " ms" } ]); >

Timeline-Eigenschaft der Chrome Developer Tools

Auf der Registerkarte „Zeitleiste“ der Chrome Developer Tools können Sie Ereignisse, Browser-Frames pro Sekunde und Speicherzuordnungen sehen. Das Tool „Speicher“ wird verwendet, um Speicherlecks und den von Seiten benötigten Speicher zu erkennen. Das Problem des Seitenflimmerns tritt auf, wenn die Bildrate weniger als 30 Bilder pro Sekunde beträgt. Das Tool „Frames“ kann helfen, die Rendering-Leistung zu verstehen und kann auch die von einer JavaScript-Aufgabe verbrauchte CPU-Zeit anzeigen.

　

3. Grundlegende Optimierung durch Begrenzung der Listengröße

Der beste Weg, dieses Problem zu lindern, besteht darin, die Größe der angezeigten Liste zu begrenzen. Dies kann durch Paginierung und das Hinzufügen unendlicher Bildlaufleisten erreicht werden.

Paginierung

Für die Paginierung können wir den „limitTo“-Filter (AngularJS-Version 1.1.4 und höher) und den „startFrom“-Filter von AngularJS verwenden. Sie können die Renderzeit verkürzen, indem Sie die Größe der Anzeigeliste begrenzen. Dies ist die effizienteste Möglichkeit, die Renderzeit zu verkürzen.

　 // Paginierung im Controller $scope.currentPage = 0; $scope.pageSize = 75; $scope.numberOfPages = function() { return Math.ceil($scope.displayedItemsList.length/ $scope.pageSize } ; // Beginnen Sie mit dem Filter angle.module('app').filter('startFrom', function() { return function(input, start) { return input.slice(start); }; // Verwendung in HTML // Paginierungsschaltflächen{{$index 1}}

Wenn Sie Paging nicht verwenden können/wollen, der Filtervorgang aber sehr langsam ist, überprüfen Sie unbedingt die ersten fünf Schritte und verwenden Sie „ng-show“, um überflüssige Listenelemente auszublenden.

Unendliche Bildlaufleiste

Wenn Sie mehr über diese Methode erfahren möchten, besuchen Sie

http://binarymuse.github.io/ngInfiniteScroll/

4. Sieben Tuning-Regeln

　1. Rendern Sie eine Liste ohne Datenbindung

Dies ist die naheliegendste Lösung, da die Datenbindung die wahrscheinlichste Ursache für Leistungsprobleme ist. Wenn Sie die Liste nur einmal anzeigen möchten und die Daten nicht aktualisieren oder ändern müssen, ist der Verzicht auf die Datenbindung eine hervorragende Lösung. Leider verlieren Sie die Kontrolle über Ihre Daten, aber wir haben keine andere Wahl, als dieses Gesetz anzuwenden. Erfahren Sie mehr:

https://github.com/Pasvaz/bindonce.

2. Verwenden Sie keine Inline-Methoden zur Datenberechnung

Um die Liste direkt im Controller zu filtern, verwenden Sie keine Methoden, die Filterlinks erhalten. „ng-repeat“ wertet jeden [$digest(

http://docs.angularjs.org/api/ng.$rootScope.Scope#$digest)] Ausdruck aus. In unserem Fall gibt „filteredItems()“ gefilterte Links zurück. Wenn der Bewertungsprozess langsam ist, wird die gesamte Anwendung schnell verlangsamt.

//Dies ist keine gute Methode, da sie eine häufige Bewertung erfordert.

//Dies ist die zu verwendende Methode

3. Verwenden Sie zwei Listen (eine zur Ansichtsanzeige und eine als Datenquelle)

Die Trennung der anzuzeigenden Liste von der Gesamtdatenliste ist ein sehr nützliches Modell. Sie können einige Filter vorverarbeiten und im Cache gespeicherte Links auf Ansichten anwenden. Der folgende Fall zeigt den grundlegenden Implementierungsprozess. Die Variable filteredLists enthält die Links im Cache und die Methode applyFilter übernimmt die Zuordnung.

　/* Controller */ // Basisliste var items = [{name:"John", active:true}, {name:"Adam"}, {name:"Chris"}, {name:"Heather" }]; // Init displayedList $scope.displayedItems = items; // Filter Cache var filteredLists['active'] = $filter('filter)(items, {"active" : true}); Scope.applyFilter = function(type) { if (filteredLists.hasOwnProperty(type){ // Prüfen, ob der Filter zwischengespeichert ist $scope.displayedItems = filteredLists[type]; } else { /* Nicht zwischengespeicherte Filterung */ } } // Zurücksetzen filter $scope.resetFilter = function() { $scope.displayedItems = items; } /* View */Select active

　{{item.name}}

　4. Verwenden Sie ng-if in anderen Vorlagen anstelle von ng-show

Wenn Sie Anweisungen oder Vorlagen verwenden, um zusätzliche Informationen darzustellen, z. B. durch Klicken, um detaillierte Informationen zu einem Listenelement anzuzeigen, verwenden Sie unbedingt ng-if (AngularJSv. 1.1.5 und höher). ng-if verhindert das Rendern (im Vergleich zu ng-show). So können bei Bedarf andere DOM- und Datenbindungen ausgewertet werden.

Der obige Inhalt enthält eine detaillierte Erklärung von 7 Vorschlägen zur Leistungsoptimierung von AngularJS. Ich hoffe, dass es Ihnen gefällt.