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.
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! 😉
Bildquellen: Artikelbild: eigene Darstellung | JS-Performance: eigene Darstellung (nach Benchmark)