+ String运算符的性能低于StringBuffer.append（）

Question

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

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()。这是真的吗？

Answer 1

你的例子并不是一个好的例子，因为表现不太可能显着不同。在您的示例中，可读性应该优于性能，因为一个与另一个的性能增益可以忽略不计。只有在进行多次连接时，数组（StringBuffer）的好处才会显而易见。即使这样，你的里程也很大程度上取决于你的浏览器。

这是一个详细的性能分析，它显示了在许多不同浏览器中使用所有不同JavaScript连接方法的性能; String Performance an Analysis

更多：
Ajaxian >> String Performance in IE: Array.join vs += continued

Answer 2

Internet Explorer是当今世界上唯一真正受此影响的浏览器。 （版本5,6和7是狗慢.8没有显示相同的退化。）而且，你的字符串越长，IE越来越慢。

如果你有连接的长字符串，那么肯定使用array.join技术。 （或者为了便于阅读，可以使用一些StringBuffer包装。）但如果你的字符串很短，请不要打扰。

Answer 3

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

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

Answer 4

同意Michael Haren。

如果性能确实存在问题，还要考虑使用数组和连接。

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

Answer 5

试试这个：

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

Answer 6

JavaScript没有本机StringBuffer对象，所以我假设这是来自您正在使用的库，或者是不寻常的主机环境（即不是浏览器）的功能。

我怀疑一个库（用JS编写）会产生更快的速度，尽管可能是原生的StringBuffer对象。使用分析器可以找到明确的答案（如果您在浏览器中运行，那么Firebug将为您提供Firefox中的JS引擎的分析器）。

Answer 7

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

Firefox，Safari或Google Chrome中的新JavaScript引擎优化

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

和

一样快

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

Answer 8

用Knuth的话说，“过早的优化是万恶之源！”任何一种方式的微小差异最终都不会产生太大影响;我会选择更具可读性的。

Answer 9

更容易阅读的方法在查看代码时可以节省人们可观察的时间，而“更快”的方法只会浪费人们浏览页面时难以察觉的可能时间。

我知道这篇文章是蹩脚的，但我不小心发布了一些完全不同的东西，认为这是一个不同的主题，我不知道如何删除帖子。我的坏......

Answer 10

使用jspref.com设置快速基准并检查Javascript性能变化非常简单。当问到这个问题时，可能还没有。但对于那些在这个问题上磕磕绊绊的人来说，他们应该在网站上采取行动。

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

Answer 11

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

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

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

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

Answer 12

据我所知，每个连接都意味着内存重新分配。所以问题不在于操作员习惯这样做，解决方案是减少连接数。例如，尽可能在迭代结构之外进行连接。

Answer 13

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

但对于小字符串，这是无关紧要的。你只关心非常大的弦乐表演。更重要的是，在大多数JS脚本中，瓶颈很少用于字符串操作，因为它没有足够的。

你最好看看DOM操作。