wake-up-neo.com

AngularJS beim Rendern mit etwa 2000 Elementen wirklich langsam?

Hier ist die Geige: http://jsfiddle.net/D5h7H/7/

Daraus ergibt sich Folgendes:

<div ng-repeat="group in Model.Groups">
    <span>{{group.Name}}</span>
    <div ng-repeat="filter in group.Filters">
        <input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
        <select ng-disabled="!filter.enabled">
            <option ng-repeat="value in filter.Values">{{value}}</option>
        </select>
    </div>
</div>

Es ist eine Liste von Filtern, die in Json vom Server geladen und dann für den Benutzer gerendert wird (in einem Beispiel wird Json direkt in Fiddle generiert). Momentan gibt es 6 Gruppen von 30 Filtern mit jeweils 15 Optionselementen für jeden Filter.

In Firefox dauert es jetzt etwa 2 Sekunden, um die Benutzeroberfläche neu zu zeichnen.

Ist diese Zeit für eckige Js in Ordnung? Gibt es irgendetwas, was ich falsch mache, das 2 Sekunden verursacht hat? Rendering (weil 2000 Elemente für mich keine große Zahl sind, aber 2 Sekunden sind sicherlich groß)?

24
Shaddix

In AngularJS 1.3+ gibt es One-time binding eingebaut:

Der Hauptzweck eines einmaligen Bindungsausdrucks besteht darin, einen Weg für Erstellen Sie eine Bindung, die abgemeldet wird und einmalige Ressourcen freigibt die Bindung ist stabilisiert. Verringerung der Anzahl der Ausdrücke als watch macht die Digest-Schleife schneller und lässt mehr Informationen zu gleichzeitig angezeigt.

Um die einmalige Bindung vorzunehmen, setzen Sie :: dem Bindungswert voran:

<div>{{::name}}</div> 

Siehe auch relevante Diskussionen:

27
alecxe

Sie sollten nach bindonce suchen, wenn Sie die Benutzeroberfläche nicht aktualisieren müssen, nachdem die Daten an sie gebunden wurden. bindonce kann auch warten, bis ein Objekt geladen wurde, und dann die Bindung ausführen. Es wird Ihnen eine Menge Zeit sparen und Ihre $watch()es drastisch reduzieren, wenn Sie sie richtig verwenden.

15
fidian

Mit diesem Projekt: angle-vs-repeat steigern Sie Ihre Leistung.

Damit rendert der Browser (also wird Dirty-Checking von winklig) nur so viele Elemente, die in den scrollbaren Container passen, in den Sie die Elemente rendern. Demo hier

4
kamilkp

Das liegt daran, wie AngularJS die Dirty-Checks durchführt. Hier ist eine definitive Antwort langsames Rendern mit AngularJS.

4
Stewie

Bei etwa 2000 zu ladenden Elementen müssen Sie sie nicht alle gleichzeitig rendern. Sie können sie aggressiv rendern, wenn Sie die Seite scrollen oder die Seite wechseln. Siehe frage

Verwenden Sie eine eindeutige ID, z. B. eine Filter-ID, um die Erstellung aller Dom-Dateien durch ng-repeat zu minimieren. Siehe tracking-and-duplicates .

Verwenden Sie als die Antwort von alecxe über einmalige Begrenzung. Wenn dies für Sie nicht angemessen ist, können Sie die Digest-Frequenz mit solchen ng-model-options="{ debounce: 200 } angle Optionseinstellungen verlangsamen.

Als letztes müssen Sie einige Tools zur Leistungsanalyse verwenden, um den Engpass der Anwendung zu ermitteln und zu beheben.

Hoffe das hilft.

ng-repeat="filter in group.Filters | track by:filter.id | limitTo: NumPerOperation"
1
Kris Roofe

Mir ist klar, dass dies eine alte Frage ist, aber ich glaube nicht, dass bisher eine Antwort gepostet wurde. 

Ich glaube, der Grund für Ihre langsame Form ist nicht nur, dass Sie mehr als 2.000 Elemente haben, sondern dass diese Elemente Formularelemente sind, die ng-model verwenden. Die in Angular integrierte Formularvalidierung ist sehr leistungsfähig und praktisch, kann sich jedoch besonders beim ersten Laden des Formulars sehr langsam verhalten. Wenn diese 180 (6x30) -Eingangselemente etwas wie ng-checked anstelle von ng-model verwendet haben, um einen Mechanismus zur Formularüberprüfung zu vermeiden, sollte das Formular wesentlich schneller geladen werden.

<input type="checkbox" ng-checked="filter.enabled">{{filter.Name}}

Das Reduzieren von Beobachtern mit einer einmaligen Bindung über :: wird auch die Situation verbessern, aber ich denke, Ihr Hauptproblem ist ng-model und die Überprüfung der Winkelform.

1
Stephen Marsh

Mit diesen beiden Winkelmodulen können Sie das Rendern Ihrer Tabellen wesentlich beschleunigen.

"schnelle Wiederholung" https://github.com/allaud/quick-ng-repeat

"unendliche Schriftrolle" https://github.com/infinite-scroll/infinite-scroll

Seien Sie sich bewusst, dass dies keine Lösung ist, um die Leistung Ihres "ng-repeat" zu verbessern. Dies ist nur ein anderer Ansatz, um Ihre Tabellen schneller zu machen.

0
Ventura