Ich habe an einer komplexen eckigen Seite gearbeitet, die Performance-Probleme verursacht hat. Um das Problem hervorzuheben, habe ich hier eine Geige Ссылка erstellt.
Im Wesentlichen wird das Leistungsproblem durch eine ng-Klasse-Anweisung verursacht, die eine Funktion enthält.
%Vor%Der Bereich ist in einer ng-Wiederholung. Beim Ausführen der Geige kann man sehen, dass ng-Klasse beim Laden der Seite mehrmals ausgeführt wird und bei jedem Tastendruck so oft aufgerufen wird wie die Anzahl der Einträge in der TODO-Liste.
Dies ist ein viel einfacherer Fall, in meinem Fall habe ich 780 Artikel auf meiner Seite und die Funktion endet rund 3000 mal ausgewertet!
Eine der Lösungen, die wir gesehen haben, besteht darin, den Bereich aufzulösen, aber es wird fast zu einer Neufassung meiner App führen.
Wir haben Ссылка auch versucht, aber es scheint nicht mit sehr dynamischen Inhalten zu funktionieren.
Irgendwelche Gedanken?
Endlich habe ich die Lösung gefunden und es hilft viel, um die Leistung in eckigen js zu verbessern.
Wenn sich Ihr Modell dynamisch ändert und Sie viele Daten haben, verbessert es auch AngularJS-Seiten, die bis zu 1000% und mehr rendern - kein Scherz!.
Weitere Informationen können Sie besuchen: Ссылка
Befolgen Sie die Schritte:
2.beispiel ohne Bibliothek: (Überprüfen Sie Ihre Konsole)
3.beispiel mit library: (überprüfen sie ihre konsole)
Ich baute einen Baum mit Ссылка mit fast 500 Elementen, um ihn zu rendern, mit ziemlich vielen Zuhörern. Das Rendern dauert 5 Sekunden. Bindonce wird dort nicht funktionieren.
Die einzige Lösung ist, make make ng-repeat weniger zu machen. Halten Sie die Liste klein mit einer Paginierung, Suche oder irgendetwas. Es ist der beste Schuss, soweit ich weiß.
Nun, hier sind meine Empfehlungen
Verwenden Sie ng-change in der Checkbox, um dom oder irgendetwas zu manipulieren, indem Sie ng-class verwenden, es wird Ihre Performance drastisch verbessern.
<li ng-repeat="todo in todos track by todo.id">
<input type="checkbox" ng-model="todo.done" ng-change="myfunction()">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
benutze track by in ng-repeat wenn du ids hast, hier mehr Ссылка
zeigt 780 Elemente in einer Liste nicht an. Verwenden Sie ein Suchfeld, um einige 100 oder 50 anzuzeigen, oder Sie wissen es besser
quick-ng-repeat wird noch nicht verwendet, versuchen Sie es zu testen Ссылка
endlich ein paar gute Ссылка
Tags und Links javascript html angularjs