[javascript] 문자열 연결이 배열 결합보다 빠른 이유는 무엇입니까?

브라우저 문자열 최적화로 인해 문자열 연결 그림이 변경되었습니다.

Firefox는 문자열 연결을 최적화 한 최초의 브라우저입니다. 버전 1.0부터 배열 기술은 실제로 모든 경우에 더하기 연산자를 사용하는 것보다 느립니다. 다른 브라우저도 문자열 연결을 최적화했기 때문에 Safari, Opera, Chrome 및 Internet Explorer 8도 더하기 연산자를 사용하여 더 나은 성능을 보여줍니다. 버전 8 이전의 Internet Explorer에는 이러한 최적화 기능이 없었으므로 배열 기술은 항상 더하기 연산자보다 빠릅니다.

— 효율적인 JavaScript 작성 : 7 장 – 더 빠른 웹 사이트

V8 자바 스크립트 엔진 (Google 크롬에서 사용됨)은 다음 코드 를 사용 하여 문자열 연결을 수행합니다.

// 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)하십시오.

답변

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

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

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

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));