Angular JS ng-repeat verbraucht mehr Browserspeicher

8

Ich habe den folgenden Code

%Vor%

users ist ein Array von Benutzerobjekten mit nur ID und Name. Anzahl der Benutzerobjekte im Array - 150

items ist ein Array von Item-Objekten mit nur ID und Bewertung. Anzahl der Objekte im Array - 150

Wenn ich dies im Browser rendere, benötigt es ungefähr 250 MB Heapspeicher, wenn ich versucht habe, in meinem Chrom zu profilieren - v23.0.1271.95.

Ich verwende AngularJS v1.0.3.

Gibt es ein Problem mit eckigen oder mache ich hier etwas falsch?

Hier ist die JS-Geige

Ссылка

    
Sabarish Sankar 28.12.2012, 05:35
quelle

3 Antworten

12

Nun, es ist nicht die ng-Wiederholung per se. Ich denke, es ist die Tatsache, dass Sie Bindings mit dem {{item.rating}} hinzufügen.

Alle diese Bindungen registrieren Uhren auf dem Zielfernrohr so:

  • 150 * 2 = 300 (für die 2 Benutzerinfos)
  • 150 * 150 = 22500 (für die Bewertungsinformationen)
  • Insgesamt 22800 Uhrfunktionen + 22800 Domelemente.

Das würde den Speicher auf einen denkbaren Wert von 250MB schieben

Von Datenbindung in angularjs

  

Sie können nicht wirklich mehr als 2000 Informationen zu einem zeigen   Mensch auf einer einzigen Seite. Etwas mehr als das ist wirklich schlechte UI, und   Menschen können das sowieso nicht verarbeiten.

    
Liviu T. 28.12.2012, 11:19
quelle
0

Ich möchte sagen, dass das Leck im zweiten Array liegt, weil Sie möglicherweise dasselbe Array durchlaufen und jedes Element für jede Benutzerzeile in Benutzern anzeigen. Je nachdem, wie groß Ihre Testdaten sind, kann diese Ansicht ziemlich groß werden. Ich könnte ein wenig mehr nachforschen. Übrigens ist deine Geige etwas ganz anderes.

    
ChrisMcKenzie 28.12.2012 06:01
quelle
0

Im Moment durchforsten Sie 150 x 150 = 22500 Objekte. Und die Registrierung einer Uhr (oder durch eine Direktive, die nur die Bewertung des Gegenstandes hinzufügt) zu jedem.

Stattdessen sollten Sie in Betracht ziehen, die Bewertung des Benutzers dem Benutzerobjekt selbst hinzuzufügen. Es wird die Größe jedes Benutzerobjekts erhöhen, aber Sie werden nur 150 Elemente durchlaufen und nur die Uhren registrieren.

Sehen Sie sich auch Indizes an. Es ist offensichtlich, dass es ähnliche Nutzer oder Artikelbewertungen geben kann. Indexieren Sie sie einfach, anstatt schwere Objekte zu durchlaufen, können Sie sie reduzieren.

Noch eine Sache - wenn Sie die Anweisung die gleiche Instanz ausführen, ändern Sie zumindest den Code:

%Vor%

zu einer Concat-Stil-String-Berechnung:

%Vor%

Dies spart Ihnen einen RIESIGEN Chunk bei der Berechnung. Ich habe einen JSperf für diesen Fall gemacht, bemerke den Unterschied, es ist ungefähr 99% schneller; -)

    
Gilad Peleg 20.08.2013 19:20
quelle