Sea of Sin / Blog

JavaScript Tipp-Kick #3 - String Verknüpfung
Stay a while, and listen

Grundszenario:
Wir möchten mehrere Strings mit einander zu einem String verknüpfen

In allen Steps musste ich die Schleifen auf 10000 für den IE und Konqueror reduzieren. Bei allen anderen Browsern gingen 100.000 Durchläufe um bessere Ergebnisse zu bekommen.

Step 1 von 4

var str = '';
for(var i = 0; i < loops; i++)
{
    str += '_test';
};

FF 3
79 Millisekunden

FF2
453 Millisekunden

IE7
329 Millisekunden

Opera
63 Millisekunden

Konqueror
735 Millisekunden

Safari
78 Millisekunden


Step 2 von 4

var str = '';
for(var i = 0; i < loops; i++)
{
    str = str+ '_test';
};

FF 3
79 Millisekunden

FF2
438 Millisekunden

IE7
312 Millisekunden

Opera
313 Millisekunden

Konqueror
812 Millisekunden

Safari
93 Millisekunden


Step 3 von 4

concat ist eine JavaScript interne Funktion welche Zeichenketten mit einander verbindet

var str = '';
for(var i = 0; i < loops; i++)
{
    str = str.concat('_test');
};

FF 3
140 Millisekunden

FF2
516 Millisekunden

IE7
391 Millisekunden

Opera
203 Millisekunden

Konqueror
795 Millisekunden

Safari
141 Millisekunden


Step 4 von 4

Nun die etwas kompliziertere Methode.
Als erstes legen wir die Strings immer an das Ende des Arrays und wandeln dieses dann mit join() in einen String um.

var buffer = new Array();
 
for(var i = 0; i < loops; i++)
{
    buffer[buffer.length] = '_test';
};
 
var str = buffer.join("");

FF 3
95 Millisekunden

FF2
500 Millisekunden

IE7
31 Millisekunden

Opera
109 Millisekunden

Konqueror
51 Millisekunden

Safari
78 Millisekunden


Das ganze hab ich im Anhang einmal tabelarisch dargestellt um dies ein wenig übersichtlicher zu machen.
Was sagt uns das nun, ich würde den Step 4 mit dem Array bevorzugen. Allein beim IE7 und Konqueror hat man über 100% Steigerung. Safari bleibt und die Einbusen bei beiden Firefox und Opera sind bei Step4 minimal.



Grün sind die besten Zeiten, rot die schlechtesten. Bezogen auf den einzelnen Browser

Ein Online Beispiel gibt es natürlich auch hier wieder
Beispiel

Viel Spass beim Testen. Über Feedback und Test Zeiten würde ich mich freuen.

Gruss
hen