为什么字符串连接比数组连接更快？

Question

今天，我阅读了关于字符串连接速度的此帖子。

令人惊讶的是，字符串连接是获胜者：

http://jsben.ch/#/OJ3vo

结果与我的想法相反。此外，有很多关于此的文章对此进行了相反的解释，例如 this。

我可以猜测浏览器在最新版本上已针对字符串 concat 进行了优化，但它们是如何做到的呢？我们是否可以说连接字符串时使用 + 更好？

---

更新

因此，在现代浏览器中，字符串连接已经过优化，因此当您想要连接时，使用 + 符号比使用 join 更快em> 字符串。

但@Arthur 指出，如果您确实想加入<，加入会更快< /em> 带分隔符的字符串。

---

更新 - 2020
Chrome：数组 join 几乎快 2 倍 是 String concat + 请参阅：https://stackoverflow.com/a/54970240/984471

注意：

• 数组join大字符串，code>会更好
• 如果我们需要在最终输出中生成几个小字符串，最好使用字符串连接+，否则使用数组将需要在最后进行多次数组到字符串的转换，这会导致性能过载。

---

Answer 1

浏览器字符串优化改变了字符串连接图片。

Firefox 是第一个优化字符串连接的浏览器。从版本 1.0 开始，数组技术实际上在所有情况下都比使用加运算符慢。其他浏览器也优化了字符串连接，因此 Safari、Opera、Chrome 和 Internet Explorer 8 使用加号运算符也显示出更好的性能。 Internet Explorer 8 之前的版本没有这样的优化，因此数组技术总是比加号运算符更快。

— 编写高效的 JavaScript：第 7 章 –更快的网站

V8 javascript 引擎（在 Google Chrome 中使用）使用 此代码用于进行字符串连接：

// ECMA-262, section 15.5.4.6
function StringConcat() {
  if (IS_NULL_OR_UNDEFINED(this) && !IS_UNDETECTABLE(this)) {
    throw MakeTypeError("called_on_null_or_undefined", ["String.prototype.concat"]);
  }
  var len = %_ArgumentsLength();
  var this_as_string = TO_STRING_INLINE(this);
  if (len === 1) {
    return this_as_string + %_Arguments(0);
  }
  var parts = new InternalArray(len + 1);
  parts[0] = this_as_string;
  for (var i = 0; i < len; i++) {
    var part = %_Arguments(i);
    parts[i + 1] = TO_STRING_INLINE(part);
  }
  return %StringBuilderConcat(parts, len + 1, "");
}

因此，他们在内部通过创建一个InternalArray（parts变量）来优化它，然后填充该数组。使用这些部分调用 StringBuilderConcat 函数。它速度很快，因为 StringBuilderConcat 函数是一些经过高度优化的 C++ 代码。此处引用的内容太长，请在 runtime.cc 文件中搜索RUNTIME_FUNCTION(MaybeObject*, Runtime_StringBuilderConcat) 查看代码。

Answer 2

Firefox 速度很快，因为它使用了名为 Ropes 的东西 (绳索：绳索的替代品）。绳子基本上就是一个 DAG，其中每个节点都是一根绳子。

例如，如果您执行 a = 'abc'.concat('def')，新创建的对象将如下所示。 当然，这并不完全是内存中的样子，因为您仍然需要一个字符串类型、长度和其他字段。

a = {
 nodeA: 'abc',
 nodeB: 'def'
}

并且 b = a.concat('123 ')

b = {
  nodeA: a, /* {
             nodeA: 'abc',
             nodeB: 'def'
          } */
  nodeB: '123'
}           

因此，在最简单的情况下，虚拟机几乎不需要做任何工作。唯一的问题是，这会稍微减慢对结果字符串的其他操作。这当然也减少了内存开销。

另一方面，['abc', 'def'].join('') 通常只会分配内存以将新字符串平铺在内存中。 （也许这个应该优化）

Answer 3

对于大量数据，连接速度更快，因此问题表述不正确。

let result = "";
let startTime = new Date().getTime();
for (let i = 0; i < 2000000; i++) {
    result += "x";
}
console.log("concatenation time: " + (new Date().getTime() - startTime));

startTime = new Date().getTime();
let array = new Array(2000000);
for (let i = 0; i < 2000000; i++) {
    array[i] = "x";
}
result = array.join("");
console.log("join time: " + (new Date().getTime() - startTime));

在 Chrome 72.0.3626.119、Firefox 65.0.1、Edge 42.17134.1.0 上测试。
请注意，即使包含数组创建，它也会更快！

Answer 4

我知道这是一个旧线程，但您的测试不正确。你正在做 output += myarray[i]; 而它应该更像 output += "" + myarray[i]; 因为你忘记了，你必须将物品与某些东西粘在一起。连接代码应该类似于：

var output = myarray[0];
for (var i = 1, len = myarray.length; i<len; i++){
    output += "" + myarray[i];
}

这样，由于将元素粘合在一起，您将执行两项操作而不是一项操作。

Array.join() 速度更快。

Answer 5

我想说，使用字符串可以更容易地预分配更大的缓冲区。每个元素只有 2 个字节（如果是 UNICODE），所以即使你很保守，你也可以为字符串预先分配一个相当大的缓冲区。对于数组，每个元素都更加“复杂”，因为每个元素都是一个对象，因此保守的实现将为较少的元素预先分配空间。

如果你尝试在每个 for 之前添加一个 for(j=0;j<1000;j++) 你会发现（在 chrome 下）速度差异变得更小。最终字符串连接仍然是 1.5 倍，但比之前的 2.6 小了。

并且必须复制元素，Unicode 字符可能比对 JS 对象的引用小。

请注意，许多 JS 引擎的实现可能对单类型数组进行了优化，这将使我编写的所有内容都毫无用处:-)

Answer 6

那里的基准是微不足道的。重复连接相同的三个项目将被内联，结果将被证明是确定性的和记忆化的，垃圾处理程序将只是丢弃数组对象（其大小几乎为零），并且可能只是从堆栈中推送和弹出，因为没有外部引用，因为字符串永远不会改变。如果测试是大量随机生成的字符串，我会印象更深刻。
就像一两​​场演出的弦乐一样。

Array.join FTW！

Answer 7

最近 系列 PR “https://github.com/JedWatson/classnames” rel="nofollow noreferrer">classnames 包都表明字符串连接现在更快。由于两者都已经如此之快了，我认为阅读本文的任何人都不应该再为此烦恼。

Answer 8

此测试显示了实际使用字符串的惩罚使用赋值串联与使用 array.join 方法进行比较。虽然 Chrome v31 中的整体赋值速度仍然是两倍，但不再像不使用结果字符串时那么快。

Answer 9

截至 2021 年，在 Chrome 上，数组 push+join 对于 10^4 或 10^5 字符串大约慢 10 倍，但对于 10^6 字符串仅慢 1.2 倍。

尝试一下 https://jsben.ch/dhIy

Answer 10

这显然取决于 javascript 引擎的实现。即使对于一种引擎的不同版本，您也可以获得明显不同的结果。您应该做自己的基准测试来验证这一点。

我想说 String.concat 在最新版本的 V8 中具有更好的性能。但对于 Firefox 和 Opera 来说，Array.join 是赢家。

Answer 11

我的猜测是，虽然每个版本都承受许多串联的成本，但连接版本除此之外还构建数组。