JavaScript et les chaines de caractères : la concaténation de chaines

La méthode de concaténation de référence est bien entendu la concaténation grâce à l'opérateur +.
C'est sûrement la méthode la plus utilisée et pratique, mais aussi la plus décriée.
Dans la suite de l'article, je nommerai cette méthode de concaténation Plus pour des raisons de commodité.

    var dest = "";
    var src = "aze";
    ...
    dest += src;
    dest += src;
    ...

La première proposition souvent mise en avant pour optimiser la pratique précédente est de réaliser de multiples concaténations sur la même ligne.
Dans la suite de l'article, je nommerai cette méthode de concaténation Plus multiple.

    var dest = "";
    var src = "aze";
    ...
    dest += src + src + src + src + src;

Une autre alternative, c'est d'utiliser la méthode concat de la classe String.
Dans la suite de l'article, je nommerai cette méthode de concaténation Concat.

    var dest = "";
    var src = "aze";
    ...
    dest = dest.concat(src);

Comme pour la méthode Plus, nous pouvons réaliser de multiples concaténations sur une seule ligne.
Dans la suite de l'article, je nommerai cette méthode de concaténation Concat multiple.

    var dest = "";
    var src = "aze";
    ...
    dest = dest.concat(src).concat(src).concat(src).concat(src).concat(src);

Lors de concaténation importante, il est recommandé de placer les chaines à concaténer dans un tableau. Puis, lorsque toutes les chaines à concaténer ont été ajoutées, il faut les concaténer grâce à la méthode join
Dans la suite de l'article, je nommerai cette méthode de concaténation Join.

    var dest = "";
    var src = "aze";
    var ar = new Array();
    ...
    ar.push(src);
    ar.push(src);
    ...
    dest = ar.join("");

Une autre proposition est de déclarer explicitement les types des variables en créant des objets String.
Je vais donc appliquer cette proposition sur toutes les méthodes précédentes.

    var dest = new String("");
    var src = new String("aze");
    ...
    dest += src;

Dans la suite de l'article, je nommerai cette méthode de concaténation Plus String.

    var dest = new String("");
    var src = new String("aze");
    ...
    dest += src + src + src + src + src;

Dans la suite de l'article, je nommerai cette méthode de concaténation Plus multiple String.

    var dest = new String("");
    var src = new String("aze");
    ...
    dest = dest.concat(src);

Dans la suite de l'article, je nommerai cette méthode de concaténation Concat String.

    var dest = new String("");
    var src = new String("aze");
    ...
    dest = dest.concat(src).concat(src).concat(src).concat(src).concat(src);

Dans la suite de l'article, je nommerai cette méthode de concaténation Concat multiple String.

    var dest = new String("");
    var src = new String("aze");
    var ar = new Array();
    ...
    ar.push(src);
    ar.push(src);
    ...
    dest = ar.join("");

Dans la suite de l'article, je nommerai cette méthode de concaténation Join String.

Le tableau ci-dessous contient les résultats des tests de concaténation sur le navigateur Chrome (en ms)

Ces mêmes résultats sont représentés sous la forme d'un graphique ci-dessous :

Comme les résultats utilisant la méthode concat ne permettent pas de voir précisément les autres résultats, le graphique suivant est le même que le précédent excepté que les résultats de la méthode concat n'y figurent plus :

Commentaires : L'utilisation de la méthode Concat dans Chrome n'est pas à recommander.
Il faut nuancer ce propos en rappelant que Chrome est un navigateur en bêta test et très récent. Ce genre de défaut disparaitra peut-être dans l'avenir
Concernant les autres méthodes de concaténation, les méthodes Plus avec ou sans déclaration String sont très proches.
Par contre, les autres méthodes Plus multiple sans déclaration String et dans une moindre mesure avec la déclaration String permettent un gain significatif de performance.
Les méthodes utilisant join n'apportent pas de gain de performance.

Le tableau ci-dessous contient les résultats des tests de concaténation sur le navigateur FireFox 2 (en ms)

Ces mêmes résultats sont représentés sous la forme d'un graphique ci-dessous :

Commentaires : Les méthodes ayant les meilleures performances sont Concat Plus et Concat Plus multiple.

Le tableau ci-dessous contient les résultats des tests de concaténation sur le navigateur FireFox 3 (en ms)

Ces mêmes résultats sont représentés sous la forme d'un graphique ci-dessous :

Commentaires : Tout d'abord, il faut noter que FireFox 3 permet de gagner au minimum 1/3 de temps.
Les performances relatives entre les méthodes sont similaires à celles de FireFox 2.

Le tableau ci-dessous contient les résultats des tests de concaténation sur le navigateur Internet Explorer 7 (en ms)

Ces mêmes résultats sont représentés sous la forme d'un graphique ci-dessous :

Commentaires : Les temps d'exécution de IE7 sont beaucoup plus élevés que ceux des autres navigateurs.
Toutes les méthodes ont des temps de réponse très proches, excepté pour Join et Join String qui permettent au moins de diviser les temps par 28.
Les premiers essais faits sur IE8 beta2 montrent des gains de performance très notables.
Je mettrais les tests de IE8 dans le document lorsque celui sera en version définitive.

Le tableau ci-dessous contient les résultats des tests de concaténation sur le navigateur Opera (en ms)

Ces mêmes résultats sont représentés sous la forme d'un graphique ci-dessous :

Commentaires : les performances sont très bonnes, quel que soit le test. Les méthodes Concat Plus et Concat Plus multiple sont nettement les meilleures façons de concaténer des chaines de caractères avec ce navigateur.

Le tableau ci-dessous contient les résultats des tests de concaténation sur le navigateur Safari (en ms)

Ces mêmes résultats sont représentés sous la forme d'un graphique ci-dessous :

Commentaires : Les performances sont variables selon les méthodes. La méthode Concat Plus est environ deux fois plus rapide que Plus String.
C'est la méthode Plus Multiple qui se détache très nettement des autres méthodes de concaténation.