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

StackOverflow https://stackoverflow.com/questions/112158

Question

Dans mon équipe, nous effectuons généralement une concaténation de chaînes comme suit: 

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?

Était-ce utile?

La solution

Internet Explorer est le seul navigateur qui en souffre réellement dans le monde actuel. (Les versions 5, 6 et 7 ont été lentes. 8 ne montre pas la même dégradation.) De plus, IE devient de plus en plus lent plus la chaîne est longue.

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

Autres conseils

Votre exemple n’est pas bon en ce sens qu’il est très peu probable que la performance soit sensiblement différente. Dans votre exemple, la lisibilité devrait avoir un impact négatif sur les performances car le gain de performance de l’un par rapport à l’autre est négligeable. Les avantages d'un tableau (StringBuffer) n'apparaissent que lorsque vous effectuez de nombreuses concatentations. Même dans ce cas, votre kilométrage peut varier en fonction de votre navigateur.

Voici une analyse détaillée des performances montrant les performances en utilisant toutes les méthodes de concaténation JavaScript différentes sur de nombreux navigateurs différents. L'analyse de la performance des chaînes

join une fois, concat () une fois, join () pour, + = pour, concat () pour

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

Oui c'est vrai mais vous ne devriez pas vous en soucier. Allez avec celui qui est plus facile à lire. Si vous devez analyser 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.

Accord avec Michael Haren .

Pensez également à utiliser des tableaux et à vous joindre si les performances sont vraiment un problème. 

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

Essayez ceci: 

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

JavaScript n'a pas d'objet StringBuffer natif. Je suppose donc qu'il s'agit 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) puisse produire quoi que ce soit 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).

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

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

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

est aussi rapide que 

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

Pour reprendre les mots de Knuth, "l'optimisation prématurée est la racine de tous les maux!" La petite différence dans l'un ou l'autre sens n'aura probablement pas beaucoup d'effet à la fin; Je choisirais celui qui est le plus lisible.

La méthode la plus facile à lire permet aux humains de gagner du temps quand on regarde le code, tandis que la méthode "plus rapide" Cette méthode ne fait que perdre un temps imperceptible et probablement négligeable lorsque les internautes consultent la page.

Je sais que ce message est boiteux, mais j’ai accidentellement posté 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. Mon mauvais ...

Il est assez facile de configurer un test d'évaluation rapide et de vérifier les variations de performances de Javascript avec jspref.com . Ce qui n'était probablement pas autour quand cette question a été posée. Mais pour ceux qui trébuchent sur cette question, ils doivent se poser en masse sur le site.

J'ai testé rapidement différentes méthodes de concaténation à l'adresse 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 est lisible et transparent. Cela conduit à la création d’utilitaires qui réduisent la répétition dans le code.

Cela tend également à utiliser automatiquement les 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 critères habituels. E.G: http://mckoss.com/jscript/SpeedTrial.htm .

Mais pour les petites chaînes, cela n’a aucune importance. Vous ne vous intéresserez qu'aux performances sur de très grandes cordes. De plus, dans la plupart des scripts JS, le goulot d'étranglement est rarement utilisé sur les cordes, car il n'en contient pas assez.

Vous feriez mieux de regarder la manipulation du DOM.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top