AngularJS wirklich langsam beim Rendern mit etwa 2000 Elementen?

Hier das fiddle:
http://jsfiddle.net/D5h7H/7/

Macht es das folgende:

<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 der Filter, der geladen ist in json vom server und dann gerendert und dem Benutzer (im Beispiel json generiert wird, gibt es rechts in der Geige). Im moment gibt es 6 Gruppen von 30 Filter in jeweils 15 option-Elemente für die einzelnen filter.

In Firefox, dauert es nun etwa 2 Sekunden lang gedrückt, um das Neuzeichnen der Benutzeroberfläche.

Ist dieses mal ok für angular js? Gibt es irgendetwas, was ich falsch mache, dass verursacht 2sec. rendering (Ursache 2000 Elemente, die nicht Aussehen, als eine große Nummer für mich, aber 2sec. ist sicherlich groß)?

InformationsquelleAutor der Frage Shaddix | 2013-03-03

26

In AngularJS 1.3+, es gibt One-time-binding built-in:

Das Hauptziel der one-time-binding-Ausdrucks ist es, einen Weg zu
erstellen Sie eine Bindung, wird abgemeldet und befreit Ressourcen, wenn
die Bindung stabilisiert wird. Die Reduzierung der Anzahl von Ausdrucksweisen
beobachtet macht die digest-loop schneller und erlaubt mehr Informationen
zur selben Zeit angezeigt.

Um das one-time-binding, prepend :: der verbindlichen Wert:
```
<div>{{::name}}</div> 
```
Siehe auch relevante Diskussionen:
InformationsquelleAutor der Antwort alecxe
15

Sollten Sie schauen,bindoncewenn Sie nicht brauchen, um die Aktualisierung der Benutzeroberfläche nachdem Sie die Daten schon gebunden. bindonce können auch warten, bis das Objekt geladen wurde, und dann die Bindung. Es erspart Ihnen eine Menge Zeit und reduzieren Sie Ihre $watch()es dramatisch, wenn richtig eingesetzt.

InformationsquelleAutor der Antwort fidian
4

Das liegt, wie AngularJS macht dirty checking. Hier ist ein definitive Antwort zu langsam-rendering mit AngularJS.

InformationsquelleAutor der Antwort Stewie
4

Durch dieses Projekt: Winkel-vs-wiederholen wird steigern Sie Ihre Leistung.

Mit dabei, die den browser gerendert wird (so eckig wird Ihren dirty-checking), um nur so viele Elemente, die passen in den scrollbaren container, in dem Sie das Rendern der Elemente. Demo hier

InformationsquelleAutor der Antwort kamilkp
1

Ich weiß, das ist eine alte Frage, aber ich glaube nicht, dass eine Antwort gepostet wurde, noch nicht.

Ich glaube, der Grund Ihrer form ist langsam nicht nur, dass Sie 2.000+ Elemente, aber diese Elemente sind Formular-Elemente mit ng-model. Die eingebaute Formular-Validierung im Winkel ist sehr leistungsfähig und günstig, aber verhält sich sehr langsam, besonders beim ersten laden der form. Wenn diese 180(6x30) input-Elemente verwendet, so etwas wie ng-checked statt ng-modelVermeidung von Formular-Validierung-Mechanismus, dann bilden Sie sollten deutlich schneller laden.

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

Verringerung watchers mit one-time-binding über :: wird auch helfen, die situation aber ich denke dein Hauptproblem mit ng-model und eckige form-Validierung.

InformationsquelleAutor der Antwort Stephen Marsh
1

Mit über 2000 Artikeln zu laden, die Sie nicht brauchen, um machen Sie alle auf einmal. Sie können aggressiv machen, wenn die Seite scrollen, oder die Seite wechseln. Finden Sie auf dieser Frage

Eindeutige id wie der filter-id zur Minimierung der Zeit der ng-repeat ist die Schaffung der dom. Finden Sie tracking-und-Duplikate

Als die Antwort von alecxe obenverwenden Sie die one-time-bounding, wenn das nicht die richtige für Sie ist, können Sie langsam die digest Häufigkeit, mit der solche ng-model-options="{ debounce: 200 } Winkel Optionseinstellungen

Und Letzte, müssen Sie einige performance-analyser-tools zu verfolgen, den Engpass der Anwendung, und beheben Sie Sie.

Hoffe, das hilft.
```
ng-repeat="filter in group.Filters | track by:filter.id | limitTo: NumPerOperation"
```
InformationsquelleAutor der Antwort Kris Roofe
0

Anhand dieser beiden eckigen Module können Sie die renderization Ihre Tabellen viel schneller.

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

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

Nur bewusst sein, das ist keine Lösung zur Verbesserung der Leistung Ihrer "ng-repeat", das ist einfach nur ein anderer Ansatz, um Ihre Tabellen schneller.

InformationsquelleAutor der Antwort Ventura
-2

Ersatz ng-repeat="group in Model.Groups" mit collection-repeat="group in Model.Groups".

InformationsquelleAutor der Antwort leopiazzoli

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.