Le moyen le plus efficace de concaténer des chaînes en JavaScript?

163

En JavaScript, j'ai une boucle qui a de nombreuses itérations, et à chaque itération, je crée une énorme chaîne avec de nombreux +=opérateurs. Existe-t-il un moyen plus efficace de créer une chaîne? Je pensais créer un tableau dynamique où je continue à y ajouter des chaînes, puis à faire une jointure. Quelqu'un peut-il expliquer et donner un exemple de la manière la plus rapide de le faire?

javascript string performance concatenation oméga
la source
2
Pourquoi utilisez-vous la chaîne? Tous les conseils de performance à ce sujet varient en fonction de votre environnement, de la taille de vos chaînes, de la façon dont un moteur js particulier optimise différentes opérations, etc.
Ben McCormick
1
peut être un double de stackoverflow.com/questions/7299010/…
rab
5
Consultez ce lien jsperf.com/join-concat/2
rab
J'utilise IE9 mais c'est en mode de compatibilité IE8 (que je ne peux pas changer). L'énorme chaîne est quelque chose que je vais insérer dans le DOM en utilisant jquery.
omega
Voir aussi Concaténation de chaînes JavaScript
Bergi

Réponses:

135

Il semble basé sur des benchmarks de JSPerf que l'utilisation +=est la méthode la plus rapide, mais pas nécessairement dans tous les navigateurs.

Pour créer des chaînes dans le DOM, il semble préférable de concaténer d'abord la chaîne, puis de l'ajouter au DOM, plutôt que de l'ajouter de manière itérative au dom. Vous devriez cependant évaluer votre propre cas.

(Merci @zAlbee pour la correction)

Jakub Hampl
la source
1
Regardez dans la page liée. On dirait qu'il y a peu de différence entre +=et faire une jointure sur un tableau.
Jakub Hampl
Il semble que l'ajouter dans le DOM pour chaque chaîne soit 66%(pour IE9) plus rapide que de créer une chaîne et d'ajouter ensuite la chaîne au DOM.
omega
la page liée utilise + = pour les deux tests, pas de .join () en vue, donc c'est un test sans signification qui ne montre que le bruit comme une «différence». bon exemple de la façon dont js peut être bruyant ... dom est plus lent que string, alors utilisez-le avec parcimonie.
dandavis
Le temps n'est qu'une composante. Pour les routines itératives, je me demande quel est l'impact sur GC entre les différentes méthodes?
David Bradley
Pour les grandes chaînes, array.join peut être préférable en raison du bogue de mémoire très désagréable de la chaîne
concat
70

Je n'ai aucun commentaire sur la concaténation elle-même, mais je tiens à souligner la suggestion de @Jakub Hampl:

Pour construire des chaînes dans le DOM, dans certains cas, il peut être préférable d'ajouter de manière itérative au DOM, plutôt que d'ajouter une énorme chaîne à la fois.

est faux, car il est basé sur un test défectueux. Ce test ne s'ajoute jamais réellement dans le DOM.

Ce test fixe montre que créer la chaîne en une seule fois avant de la rendre est beaucoup, BEAUCOUP plus rapide. Ce n'est même pas un concours.

(Désolé, il s'agit d'une réponse distincte, mais je n'ai pas encore assez de représentants pour commenter les réponses.)

zAlbee
la source
4
Je pense que cela vaut la peine d'être une réponse en soi car il contient un test et une conclusion (bien que le test soit basé / inspiré sur une autre réponse, cela devrait être correct), pas besoin de pardon.
user202729
14

Il y a trois ans que cette question a été répondue mais je fournirai quand même ma réponse :)

En fait, la réponse acceptée n'est pas entièrement correcte. Le test de Jakub utilise une chaîne codée en dur qui permet au moteur JS d'optimiser l'exécution du code (le V8 de Google est vraiment bon dans ce domaine!). Mais dès que vous utilisez des chaînes complètement aléatoires ( voici JSPerf ), la concaténation de chaînes sera à la deuxième place.

Volodymyr Usarskyy
la source
Fait intéressant avec Chrome 54 et Firefox 45 sur ma machine Windows, concat est plus de deux fois plus rapide que les deux autres en utilisant votre version. IE 11 a les trois aussi lents que le non-concat dans les deux autres navigateurs.
ShawnFumo
4
C'est différent d'une version à l'autre. Je suppose que pour le moment, la VM de Chrome pourrait contenir une pré-optimisation pour ce cas. J'ai testé à nouveau sur Chrome v53 et la concaténation est désormais la solution la plus rapide: D Le même matériel mais une version différente de Chrome donne des résultats totalement différents.
Volodymyr Usarskyy
8

Vous pouvez également faire un concat de chaîne avec des littéraux de modèle . J'ai mis à jour les tests JSPerf des autres affiches pour l'inclure.

for (var res = '', i = 0; i < data.length; i++) {
  res = `${res}${data[i]}`;
}
Madbreaks
la source