JavaScript Array erstellen: Performance-Unterschiede

Ein neues Array kann in JavaScript auf verschiedene Arten erstellt werden. Doch es gibt durchaus Unterschiede bei der Performance. Je nachdem ob man ein Array literal, über „new“, leer oder mit Daten erstellt, sind deutliche Unterschiede in der Geschwindigkeit erkennbar.

Als ich auf der Suche nach der besten Möglichkeit war ein Array in JavaScript zu erstellen, stieß ich auf einen interessanten Beitrag in stackoverflow. Dort fragt ein Nutzer, warum

var arr = [];

schneller verarbeitet wird als

var arr = new Array;

Dass dies nicht nur eine Vermutung des Nutzers ist sondern wirklich Unerschiede in der Performance bestehen, beweist ein Benchmark der die verschiedenen Möglichkeiten ein Array zu erstellen gegenüberstellt. Für jede der Möglichkeiten wird gemessen, wieviele Operationen pro Sekunde abgearbeitet werden können.

Array Performance Test

Meine Tests mit einem Firefox 18.0 32-bit und einem Chrome 25.0 kamen zu folgendem Ergebnis:

 = ["data"]; // literal with data

Firefox: ca. 50,9 Mio Ops/sec
Chrome: ca. 173,3 Mio Ops/sec

 = []; // literal

Firefox: ca. 34,1 Mio Ops/sec
Chrome: ca. 170,2 Mio Ops/sec

 = new Array; // new

Firefox: ca. 34,0 Mio Ops/sec
Chrome: ca. 96,3 Mio Ops/sec

 = new Array(); // invoke

Firefox: ca. 33,8 Mio Ops/sec
Chrome: ca. 95,3 Mio Ops/sec

 = Array(); // without new

Firefox: ca. 32,3 Mio Ops/sec
Chrome: ca. 103,5 Mio Ops/sec

 = new Array(0); // zero length

Firefox: ca. 32,2 Mio Ops/sec
Chrome: ca. 84,5 Mio Ops/sec

 = Object.create(Array.prototype); // create

Firefox: ca. 22,1 Mio Ops/sec
Chrome: ca. 6,0 Mio Ops/sec

 = new Array("data"); // new with data

Firefox: ca. 8,7 Mio Ops/sec
Chrome: ca. 11,1 Mio Ops/sec

 = Array("data"); // array with data

Firefox: ca. 8,7 Mio Ops/sec
Chrome: ca. 9,8 Mio Ops/sec

Wenn man ein Array literal erstellt, schafft der Browser also mehr Operationen pro Sekunde als mit den anderen Erstellungsmöglichkeiten. Wer seine Arrays in einer Anwendung ab sofort so erstellt, kann sich durchaus einige Sekunden Ladezeit ersparen.

Google Chrome mit dem schnellsten JavaScript

Was mir außerdem sofort an den Statistiken des Benchmarks auffiel, war die überdeutliche Dominanz der Geschwindigkeit des Google Chrome. So schafft der Mozilla Firefox im Durchschnitt nicht einmal die Hälfte der Operationen pro Sekunde im Gegensatz zu Google Chrome. Die anderen Browser wie der Internet Explorer, Opera oder Safari liegen sogar noch hinter den Werten des Firefox.

JavaScript Array Performance Benchmark

Die Zahlen sind zwar nicht durch besonders viele Werte belegt, jedoch zeigen sie trotzdem bereits deutlich die Geschwindigkeit des Chrome. Wer seine JavaScript-Anwendung weiter auf die Geschwindigkeit in Google Chrome optimieren möchte, dem lege ich die Zusammenfassung der 13 JavaScript Performance Tipps ans Herz. Diese Zusammenfassung beschreibt die vom Google-Arbeitnehmer Daniel Clifford veröffentlichten Tipps zum schnelleren Kompillieren der V8 Chrome Engine. Ein Tipp lautet unter anderem:

„Initialize using array literals for small fixed-sized arrays“

Viel Spaß bei der fröhlichen Geschwindigkeits-Optimierung! 😉


Schreibe einen Kommentar