Ist das Lesen der `length` - Eigenschaft ein array wirklich so teuer eine operation in JavaScript?

Ich immer davon ausgegangen, das Zwischenspeichern der Länge eines array in JavaScript ist eine gute Idee (vor allem im Zustand eines for - Schleife) wegen der Kostspieligkeit der Berechnung der Länge eines Arrays.

Beispiel

for (var i = 0; i < arr.length; i++) { }

//vs

for (var i = 0, arrLength = arr.length; i < arrLength; i++) { }

Aber ich dachte, vielleicht ist die length Eigenschaft wird nur aktualisiert, auf die Bildung und die änderung des Arrays. Daher Lesen es sollte nicht zu teuer sein, eine operation im Gegensatz zu Lesen Sie es in einer Variablen gespeichert (im Gegensatz zu anderen Methoden, die in anderen Sprachen benötigen, um im Speicher zu finden, das Ende von etwas, z.B. strlen() in C).

Habe ich zwei Fragen. Ich bin auch daran interessiert, wie das funktioniert, also bitte nicht schlagen Sie mich mit der vorzeitige Optimierung stick.

Übernehmen die JavaScript-engines in den Browsern.

  1. Ist es von Vorteil, um die Zwischenspeicherung der length - Eigenschaft ein array in JavaScript? Ist dort viel stärker eingebunden in das Lesen einer lokalen Variablen über eine Objekt-Eigenschaft?
  2. Ist die length Eigenschaft einfach verändert, die auf die Bildung und auf shift() und pop() Art Methoden, die nicht zurückkehren, ein neues array und sonst einfach als Ganzzahl gespeichert?
InformationsquelleAutor alex | 2011-04-22
  1. 47

    Gut, hätte ich gesagt, es war teuer, aber dann schrieb ich einen kleinen test @ jsperf.com und zu meiner überraschung mit i<array.length tatsächlich schneller war, als in Chrome und in FF(4) ist es egal.

    Mein Verdacht ist, dass die Länge gespeichert als integer-Wert (Uint32). Aus dem ECMA-specs (262 ed. 5, Seite 121):

    Jedes Array-Objekt hat eine
    length-Eigenschaft, deren Wert ist immer eine nicht negative ganze Zahl kleiner als 232. Der Wert der length-Eigenschaft
    numerisch größer als der name von
    jede Eigenschaft, deren name ist ein array
    index; wenn eine Eigenschaft eines Arrays
    Objekt erstellt oder geändert, andere
    Eigenschaften werden bei Bedarf angepasst
    um diese invariante.
    Speziell, wenn eine Eigenschaft ist
    Hinzugefügt, dessen name ist ein array-index,
    die length-Eigenschaft geändert wird, wenn
    notwendig, um eine mehr als die
    numerischer Wert des array-index; und
    wenn für die length-Eigenschaft
    geändert, jede Eigenschaft, deren name ist
    ein array-index, dessen Wert nicht
    kleiner als die neue Länge ist
    automatisch gelöscht. Diese Einschränkung
    gilt nur für eigene Eigenschaften einer
    Array-Objekt und wird nicht durch
    Länge oder array-index-Eigenschaften, die
    kann sein geerbt von seinem Prototypen

    Puh! Ich weiß nicht, ob ich jemals wieder eine solche Sprache ...

    Schließlich haben wir immer unsere guten alten rückständigen browser. Im IE (9, 8, 7), die Zwischenspeicherung, die Länge ist wirklich schneller. Einer der vielen Gründe mehr, nicht den IE nutzen, sage ich.

    • In meinem Chrome 10.0.648.127 auf Linux i686, es spielte keine Rolle, wie gut.
    • Arrays in Skript-Sprachen (Ruby, Perl, ...) wissen in der Regel zwei Längen als einfache Ganzzahlen: wie viele slots zugeordnet wurden und wie viele slots in Gebrauch sind (d.h. die Länge). Jeder würde es anders tun in einer JavaScript-engine dürfte wohl nicht erlaubt sein, irgendwo in der Nähe eines compiler 🙂 - Arrays in der Regel wissen, wie lange Sie ohne computing. Außer in C natürlich.
    • Da die meisten modernen JS-engines tatsächlich einiges JIT-kompilieren, erwarte ich, dass Sie einfach zu identifizieren, wie ein gemeinsames Vokabular und ersetzen Sie es mit die effizienteste Variante. Also die Java-Regel wird wieder wahr: schreiben Sie einfach, unkompliziert-code.
    • Sauer. Angenommen, das ist wahr. Sowieso, warum sollte schreiben, einfach, unkompliziert-code in Anspruch genommen werden als eine Java-Regel?
    • Es ist nicht nur eine Java-Regel, aber in Java ist es manchmal zitiert für performance-Gründen. Es gibt einen Häufig zitierten Artikel mit dem Titel "Write Dumb Code".
    • Ich würde sagen, dass da caching-die Länge macht den Unterschied in IE und IE (zumindest vor IE 9) ist unglaublich langsamste browser, es ist eine Optimierung, die könnte sich lohnen.
    • Unten: es macht einen Unterschied im IE9 auch! Die Skript-engine im browser scheint immer noch hinter ein paar ära.
    • Es macht immer noch einen Unterschied in IE11...
    • Für LG und Samsung Smart TVs und der PS4 (Sie ist WebKit-basiert), haben Sie ziemlich viel sehr ähnlich Verhalten, als ein Safari-browser. Also das caching macht einen großen Unterschied.

    InformationsquelleAutor KooiInc
  2. 26

    TL;DR:

    Von dem, was ich sammeln können, es scheint wie die Länge des array wird intern zwischengespeichert (zumindest in V8)..

    (Details? Lesen Sie weiter :))

    So, diese Frage hat dinged in meinem Kopf herum, ein paar mal und ich habe beschlossen, zu erhalten, um die Wurzel des Problems (zumindest bei einer Umsetzung).

    Graben rund um V8-Quelle ergab die JSArray Klasse.

    //The JSArray describes JavaScript Arrays
// Such an array can be in one of two modes:
//   - fast, backing storage is a FixedArray and length <= elements.length();
//      Please note: push and pop can be used to grow and shrink the array.
//   - slow, backing storage is a HashTable with numbers as keys.

    Ich bin so eine Vermutung, dass der Typ der array-Elemente wird bestimmt, ob es schnell oder langsam. Ich habe unten ein bit-flag gesetzt set_has_fast_elements (set_bit_field2(bit_field2() | (1 << kHasFastElements))), die ist, wo ich dachte, ich würde zeichnen, den Graben Linie, wie ich war auf der Suche im google-code und nicht die Quelle lokal.

    Nun, es scheint, dass alle Zeit alle Bedienung erfolgt auf dem array (das ist eine Kind-Klasse von JSObject ein Aufruf zu NormalizeElements(), die ausgeführt wird, die folgenden:

    //Compute the effective length.
  int length = IsJSArray() ?
      Smi::cast(JSArray::cast(this)->length())->value() :
      array->length();

    So, in Beantwortung Ihrer Fragen:

    1. Scheint es nicht zu sein, jeder Vorteil in Chrome (oder anderen Browsern, die V8) zum Zwischenspeichern der length - Eigenschaft ein array (es sei denn, du tust etwas seltsam, dass zwingen würde, es zu slow (ich bin mir nicht sicher, was diese Bedingungen sind) - nachdem das gesagt ist, werde ich höchstwahrscheinlich weiterhin cache length bis ich bekomme eine chance zu gehen durch alle OS-browser Implementierungen 😉
    2. Die length Eigenschaft zu sein scheint, verändert nach alle Vorgang auf das Objekt ist.

    Edit:

    Auf einer seitlichen Anmerkung scheint es, dass ein "leeres" array ist tatsächlich zugewiesen zu haben, die 4 Elemente:

    //Number of element slots to pre-allocate for an empty array.
static const int kPreallocatedArrayElements = 4;

    Ich bin mir nicht sicher, wie viele Elemente das array wächst, sobald die Grenzen überschritten wurden - ich habe nicht Graben , dass tief 🙂

    • Typische Implementierungen wachsen wird das array durch ein konstantes Vielfaches der Größe des Arrays - in der Regel durch Verdoppelung, durch eine Verdreifachung, Vervierfachung, usw.. alle ergeben die gleiche fortgeführten O(1) für das einfügen.
    • vielen Dank - würde herausgefunden haben, wie viel, aber nicht wissen sicher, da ich nicht tiefer Graben 🙂
    • Das ist eine lange tl;dr, aber +1 für Graben-browser-Quellcode.
    InformationsquelleAutor Demian Brecht
  3. 12

    Einen anderen Satz von performance -tests. Die Schleife über ein array von Millionen von Zufallszahlen mit einer leeren Schleife.

    In Chrom, die Schlaufen mit cached und non-cached-Längen Uhr so ziemlich die gleichen Zeiten, so bin ich vermute, es ist ein V8 Optimierung von cache die Länge.

    In Safari und Firefox, werden die zwischengespeicherten Länge wurde konsequent über 2x schneller als die nicht-gecachte version.

    • Im Firefox 40 die cached und non-cached-version haben die gleiche Leistung.
    InformationsquelleAutor Anurag
  4. 5

    Dieser Artikel untersucht, automatische Zwischenspeicherung, die in V8 und Chrom, durch bitten IRHydra für den generierten code:

    Wie der Grinch stole array.Länge Zugriff von Wjatscheslaw Jegorow

    Er fand, dass unter bestimmten Bedingungen manuell Zwischenspeichern der .length tatsächlich zusätzlichen Aufwand eher als die Verbesserung der Leistung!

    Aber trotzdem, diese Art von Mikro-Optimierung ist unwahrscheinlich, um einen spürbaren Gewinn für die Benutzer. Für Ihren Vorteil und für Ihre, konzentrieren Sie sich stattdessen auf code, ist klar zu Lesen, und mit guten Datenstrukturen und algorithmen in Ihrem code!

    Vermeiden Sie vorzeitige Optimierung: Konzentrieren Sie sich auf eleganten code, bis ein performance-Problem entsteht. Nur dann, auf die Suche nach dem Engpass durch profiling und dann optimieren nur, dass ein Teil der code.

    InformationsquelleAutor joeytwiddle
  5. 4

    Nur eine Anmerkung:

    Bei einigen Browsern (ich habe bemerkt, es in Safari, IE und Opera), können Sie bekommen einen Geschwindigkeitsschub durch die Zwischenspeicherung der Länge innerhalb der for-Schleife Erklärung:

    var j;
for (var i = 0, len = arr.length; i < len; i++) {
  j = arr[i];
}

    Bearbeitete ich @KooiInc ist jsperf-test oben, um fügen Sie diesem Fall.

    • Von Interesse ist, ich lief in diesem test auf die vier wichtigsten Browsern (jetzt enthalten in der Grafik) und speichern Länge ist eine ziemlich spürbare positive im IE und Safari, aber es bietet keinen nutzen für Chrome und Firefox. Überraschend, Firefox blies den anderen Browsern entfernt. Wenig überraschend ist, dass Safari war mit Abstand der langsamste im test.
    InformationsquelleAutor musicnothing
  6. 2

    Darauf, dass Sie nicht davon ausgehen, dass dies wahr ist für alle Sammlungen durchsuchbar. Zum Beispiel das caching der Länge eines HTMLCollection 65% schneller in Chrome (Version 41) und 35% schneller in Firefox (Version 36).

    http://jsperf.com/array-length-in-loop-dom

    • Auch wichtig zu beachten, dass die length ist nicht statisch in eine HTMLCollection, es passt zu reflektieren Elemente aufeinander abgestimmt sind.
    InformationsquelleAutor Dustin Hayes
Schreibe einen Kommentar