Why is string concatenation faster than array join?

by

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

The V8 javascript engine (used in Google Chrome) uses this code to do string concatenation:

// 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, "");
}

So, internally they optimize it by creating an InternalArray (the parts variable), which is then filled. The StringBuilderConcat function is called with these parts. It’s fast because the StringBuilderConcat function is some heavily optimized C++ code. It’s too long to quote here, but search in the runtime.cc file for RUNTIME_FUNCTION(MaybeObject*, Runtime_StringBuilderConcat) to see the code.

More Related Contents:

  1. Defining methods via prototype vs using this in the constructor – really a performance difference?
  2. What’s the best way to convert a number to a string in JavaScript?
  3. When does reflow happen in a DOM environment?
  4. Controlling fps with requestAnimationFrame?
  5. regex.test V.S. string.match to know if a string matches a regular expression
  6. Should CSS always precede Javascript?
  7. Javascript when to use prototypes
  8. Does use of anonymous functions affect performance?
  9. How to avoid freezing the browser when doing long-running computations in Javascript
  10. Why is bind slower than a closure?
  11. JavaScript loop performance – Why is to decrement the iterator toward 0 faster than incrementing
  12. Is there a performance difference between ‘let’ and ‘var’ in JavaScript
  13. v8 JavaScript performance implications of const, let, and var?
  14. Object.keys() complexity?
  15. Javascript prototype operator performance: saves memory, but is it faster?
  16. JavaScript performance difference between double equals (==) and triple equals (===)
  17. Best way to execute js only on specific page
  18. JavaScript String concatenation behavior with null or undefined values
  19. Why Array.forEach is slower than for() loop in Javascript? [duplicate]
  20. Does the tag position in HTML affects performance of the webpage?
  21. Javascript console.log(object) vs. concatenating string
  22. setTimeout() with string or (anonymous) function reference? speedwise [closed]
  23. Are ES6 template literals faster than string concatenation?
  24. Javascript (jQuery) performance measurement and best practices (not load time)
  25. How browser executes Javascript and renders asynchronously
  26. Javascript – insert an array inside another array
  27. Extending String.prototype performance shows that function calls are 10x faster
  28. visibility:hidden vs display:none vs opacity:0
  29. Does using a document fragment really improve performance?
  30. value of using React.forwardRef vs custom ref prop

Leave a Comment