+运算符的性能比StringBuffer.append（）差

在我的团队中，我们通常像这样进行字符串连接：

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

显然，以下内容更具可读性：

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

但是JS专家声称+运算符的性能不如运算符StringBuffer.append()。这是真的吗？

Internet Explorer是当今世界上唯一遭受此困扰的浏览器。（版本5、6和7的速度变慢。8不会出现相同的降级。）而且，IE越长，字符串越长，速度就越慢。

如果您要连接的字符串很长，则一定要使用array.join技术。（或者，一些StringBuffer包装器，以提高可读性。）但是，如果您的字符串较短，请不要打扰。

您的示例不是一个很好的示例，因为性能不太可能出现显着差异。在您的示例中，可读性应胜过性能，因为一个性能对另一个性能的提高可忽略不计。数组（StringBuffer）的好处只有在您进行许多合并时才显而易见。即使那样，您的行驶里程也可能很大程度上取决于您的浏览器。

这是一份详细的性能分析，显示了在许多不同浏览器中使用所有不同JavaScript串联方法的性能。字符串性能分析

更多：
Ajaxian >> IE中的字符串性能：Array.join与+ =续

是的，这是真的，但您不必在意。选择一个更容易阅读的语言。如果您必须对您的应用进行基准测试，请关注瓶颈。

我猜想字符串连接不会成为您的瓶颈。

同意Michael Haren的观点。

如果性能确实是一个问题，也要考虑使用数组和联接。

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

试试这个：

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

就像一些用户已经注意到的那样：这与小字符串无关。

Firefox，Safari或Google Chrome中的新JavaScript引擎也进行了优化

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

快如

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

JavaScript没有本地的StringBuffer对象，因此我假设这是您正在使用的库中的内容，或者是不寻常的宿主环境（即不是浏览器）的功能。

我怀疑一个库（用JS编写）会更快地产生任何东西，尽管原生StringBuffer对象可能会。可以使用探查器找到明确的答案（如果您在浏览器中运行，则Firebug将为您提供Firefox中JS引擎的探查器）。

用克努斯的话来说，“过早的优化是万恶之源！” 两种方式之间的小偏差最终都不会产生太大影响。我会选择可读性更高的一种。

易于阅读的方法在查看代码时节省了人类可察觉的时间，而“更快”的方法仅在人们浏览页面时浪费了难以察觉且可能微不足道的时间。

我知道这则帖子很me脚，但是我不小心发布了完全不同的内容，以为这是一个不同的主题，而且我不知道如何删除该帖子。我的错...

使用jspref.com设置快速基准测试并检查Javascript性能变化非常容易。。当问这个问题时，可能不是。但是，对于在此问题上绊脚石的人们，应该看看该网站。

我在http://jsperf.com/string-concat-methods-test上对各种串联方法进行了快速测试。

我喜欢使用功能样式，例如：

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")
    ]
  )
)

这种样式看起来可读且透明。它导致创建实用程序，该实用程序减少了代码的重复。

这也倾向于自动使用中间字符串。

据我所知，每个串联都意味着内存重新分配。因此，问题不在于操作员曾经这样做过，解决方案是减少级联数量。例如，如果可以，请在迭代结构之外进行串联。

是的，根据通常的基准。EG：http : //mckoss.com/jscript/SpeedTrial.htm。

但是对于小的字符串，这是无关紧要的。您将只关心非常大的字符串的演奏。而且，在大多数JS脚本中，瓶颈操作很少出现在字符串操作上，因为它不够用。

您最好注意DOM操作。