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

Question

今天，我阅读了 this thread关于字符串连接的速度。

令人惊讶的是，字符串连接是赢家:

http://jsben.ch/#/OJ3vo

结果和我想的相反。此外，有很多文章对此进行了相反的解释，如this .

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

---

更新

因此，在现代浏览器中，字符串连接得到了优化，因此当您想连接 字符串时，使用 + 符号比使用 join 更快。​​

但是@Arthur pointed out join 如果您真的想用分隔符join 字符串会更快。

---

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

注意:

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

---

Answer 1

Browser string optimizations have changed the string concatenation picture.

Firefox was the first browser to optimize string concatenation. Beginning with version 1.0, the array technique is actually slower than using the plus operator in all cases. Other browsers have also optimized string concatenation, so Safari, Opera, Chrome, and Internet Explorer 8 also show better performance using the plus operator. Internet Explorer prior to version 8 didn’t have such an optimization, and so the array technique is always faster than the plus operator.

— Writing Efficient JavaScript: Chapter 7 – Even Faster Websites

V8 javascript 引擎(用于 Google Chrome)使用 this code进行字符串连接:

// 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) 的文件以查看代码。