est l'opérateur + moins performant que StringBuffer.append ()

Dans mon équipe, nous faisons généralement la concatentation de chaînes comme ceci:

var url = // some dynamically generated URL
var sb = new StringBuffer();
sb.append("<a href='").append(url).append("'>click here</a>");

Évidemment, ce qui suit est beaucoup plus lisible:

var url = // some dynamically generated URL
var sb = "<a href='" + url + "'>click here</a>";

Mais les experts JS affirment que l' +opérateur est moins performant que StringBuffer.append(). Est-ce vraiment vrai?

Internet Explorer est le seul navigateur qui en souffre vraiment dans le monde d'aujourd'hui. (Les versions 5, 6 et 7 étaient trop lentes. 8 ne montre pas la même dégradation.) De plus, IE devient de plus en plus lent, plus votre corde est longue.

Si vous avez de longues chaînes à concaténer, utilisez définitivement une technique array.join. (Ou un wrapper StringBuffer autour de cela, pour plus de lisibilité.) Mais si vos chaînes sont courtes, ne vous inquiétez pas.

Votre exemple n'est pas bon dans la mesure où il est très peu probable que la performance soit sensiblement différente. Dans votre exemple, la lisibilité devrait l'emporter sur les performances car le gain de performance de l'un par rapport à l'autre est négligeable. Les avantages d'un tableau (StringBuffer) ne sont apparents que lorsque vous effectuez de nombreuses concatentations. Même dans ce cas, votre kilométrage peut dépendre de votre navigateur.

Voici une analyse détaillée des performances qui montre les performances en utilisant toutes les différentes méthodes de concaténation JavaScript sur de nombreux navigateurs différents; Performance des chaînes et analyse

Plus:
Ajaxian >> Performances des chaînes dans IE: Array.join vs + = suite

Oui c'est vrai mais vous ne devriez pas vous en soucier. Choisissez celui qui est plus facile à lire. Si vous devez évaluer votre application, concentrez-vous sur les goulots d'étranglement.

Je suppose que la concaténation de chaînes ne sera pas votre goulot d'étranglement.

D'accord avec Michael Haren .

Pensez également à l'utilisation de tableaux et à la jointure si les performances sont effectivement un problème.

var buffer = ["<a href='", url, "'>click here</a>"];
buffer.push("More stuff");
alert(buffer.join(""));

Essaye ça:

var s = ["<a href='", url, "'>click here</a>"].join("");

Comme déjà certains utilisateurs l'ont noté: ceci n'est pas pertinent pour les petites chaînes.

Et les nouveaux moteurs JavaScript de Firefox, Safari ou Google Chrome optimisent

"<a href='" + url + "'>click here</a>";

est aussi rapide que

["<a href='", url, "'>click here</a>"].join("");

JavaScript n'a pas d'objet StringBuffer natif, donc je suppose que cela provient d'une bibliothèque que vous utilisez, ou d'une fonctionnalité d'un environnement hôte inhabituel (c'est-à-dire pas un navigateur).

Je doute qu'une bibliothèque (écrite en JS) produise quelque chose plus rapidement, bien qu'un objet StringBuffer natif puisse le faire. La réponse définitive peut être trouvée avec un profileur (si vous utilisez un navigateur, Firebug vous fournira un profileur pour le moteur JS de Firefox).

Selon les termes de Knuth, "l'optimisation prématurée est la racine de tout mal!" La petite différence de toute façon n'aura probablement pas beaucoup d'effet à la fin; Je choisirais le plus lisible.

La méthode la plus facile à lire fait gagner un temps perceptible aux humains lorsqu'ils regardent le code, tandis que la méthode «plus rapide» ne gaspille qu'un temps imperceptible et probablement négligeable lorsque les gens parcourent la page.

Je sais que ce message est nul, mais j'ai accidentellement publié quelque chose de complètement différent en pensant que c'était un fil différent et je ne sais pas comment supprimer des messages. Ma faute...

Il est assez facile de configurer un benchmark rapide et de vérifier les variations de performances Javascript à l'aide de jspref.com . Ce qui n'était probablement pas là lorsque cette question a été posée. Mais pour les gens qui trébuchent sur cette question, ils devraient consulter le site.

J'ai fait un test rapide de diverses méthodes de concaténation sur http://jsperf.com/string-concat-methods-test .

J'aime utiliser un style fonctionnel, tel que:

function href(url,txt) {
  return "<a href='" +url+ "'>" +txt+ "</a>"
}

function li(txt) {
  return "<li>" +txt+ "</li>"
}

function ul(arr) {
  return "<ul>" + arr.map(li).join("") + "</ul>"
}

document.write(
  ul(
    [
      href("http://url1","link1"),
      href("http://url2","link2"),
      href("http://url3","link3")
    ]
  )
)

Ce style semble lisible et transparent. Cela conduit à la création d'utilitaires qui réduisent la répétition dans le code.

Cela a également tendance à utiliser automatiquement des chaînes intermédiaires.

Autant que je sache, chaque concaténation implique une réallocation de mémoire. Le problème n'est donc pas l'opérateur utilisé pour le faire, la solution est de réduire le nombre de concaténations. Par exemple, faites les concaténations en dehors des structures d'itération lorsque vous le pouvez.

Oui, selon les benchmarks habituels. EG: http://mckoss.com/jscript/SpeedTrial.htm .

Mais pour les petites chaînes, cela n'a pas d'importance. Vous ne vous soucierez que des performances sur de très grosses cordes. De plus, dans la plupart des scripts JS, le goulot d'étranglement est rarement sur les manipulations de chaîne car il n'y en a pas assez.

Vous feriez mieux de regarder la manipulation du DOM.