91

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

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

4

13 回答 13

102

您的示例不是一个好示例，因为性能不太可能有显着差异。在您的示例中，可读性应该胜过性能，因为一个与另一个的性能增益可以忽略不计。数组 (StringBuffer) 的好处只有在您进行许多连接时才会显现出来。即使那样，您的里程也可能非常取决于您的浏览器。

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

join() 一次， concat() 一次， join() for， +​​= for， concat() for

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

于 2008-09-21T21:10:29.587 回答
46

Internet Explorer 是当今世界上唯一真正受此困扰的浏览器。（版本 5、6 和 7 非常慢。8 没有表现出同样的降级。）更重要的是，IE 变得越来越慢，字符串越长。

如果你有很长的字符串要连接，那么一定要使用 array.join 技术。（或一些围绕它的 StringBuffer 包装器，以提高可读性。）但如果你的字符串很短，请不要打扰。

于 2008-09-21T22:26:10.077 回答
37

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

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

于 2008-09-21T21:06:21.547 回答
32

同意迈克尔·哈伦。

如果性能确实是一个问题，还可以考虑使用数组和连接。

var buffer = ["<a href='", url, "'>click here</a>"];
buffer.push("More stuff");
alert(buffer.join(""));
于 2008-09-21T21:10:37.920 回答
18

试试这个：

var s = ["<a href='", url, "'>click here</a>"].join("");
于 2008-09-21T21:08:14.790 回答
8

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

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

于 2008-09-21T21:08:28.547 回答
8

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

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

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

一样快

["<a href='", url, "'>click here</a>"].join("");
于 2008-09-21T21:20:39.377 回答
6

用 Knuth 的话来说，“过早的优化是万恶之源！” 无论哪种方式的小差异最终很可能不会产生太大影响。我会选择更具可读性的。

于 2008-09-21T21:08:36.987 回答
4

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

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

于 2012-12-03T08:55:29.477 回答
3

使用jspref.com设置快速基准并检查 Javascript 性能变化非常容易。当这个问题被问到时，它可能并不存在。但是对于遇到这个问题的人来说，他们应该看看这个网站。

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

于 2012-09-21T20:42:40.860 回答
2

我喜欢使用函数式风格，例如：

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

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

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

于 2011-08-07T04:14:27.023 回答
1

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

于 2008-09-21T21:12:35.200 回答
0

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

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

你最好看看 DOM 操作。

于 2008-09-21T21:10:06.267 回答