+ 연산자는 StringBuffer.append()보다 성능이 떨어집니다.

StackOverflow https://stackoverflow.com/questions/112158

문제

우리 팀에서는 일반적으로 다음과 같이 문자열 연결을 수행합니다.

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().이게 정말 사실인가요?

도움이 되었습니까?

해결책

Internet Explorer는 오늘날 세계에서 실제로 이러한 문제를 겪고 있는 유일한 브라우저입니다.(버전 5, 6, 7은 매우 느렸습니다.8에서는 동일한 성능 저하가 나타나지 않습니다.) 게다가 문자열이 길어질수록 IE는 점점 느려집니다.

연결해야 할 긴 문자열이 있는 경우 반드시 array.join 기술을 사용하십시오.(또는 가독성을 위해 이를 둘러싼 StringBuffer 래퍼입니다.) 하지만 문자열이 짧더라도 신경쓰지 마세요.

다른 팁

귀하의 예는 성능이 크게 다를 가능성이 거의 없다는 점에서 좋은 예가 아닙니다.귀하의 예에서는 성능 향상이 무시할 수 있기 때문에 가독성이 성능보다 우선해야 합니다.배열(StringBuffer)의 이점은 연결을 많이 수행할 때만 분명해집니다.그럼에도 불구하고 마일리지는 브라우저에 따라 달라질 수 있습니다.

다음은 다양한 브라우저에서 다양한 JavaScript 연결 방법을 사용한 성능을 보여주는 자세한 성능 분석입니다. 현악기 연주 분석

join() once, concat() once, join() for, += for, concat() for

더:
Ajaxian >> IE의 문자열 성능:Array.join 대 += 계속

예, 사실입니다. 하지만 신경쓰지 않아도 됩니다.읽기 쉬운 것을 선택하세요.앱을 벤치마킹해야 한다면 병목 현상에 집중하세요.

나는 문자열 연결이 병목 현상을 일으키지 않을 것이라고 생각합니다.

에 동의하다 마이클 하렌.

또한 성능이 실제로 문제가 되는 경우 배열 사용을 고려하고 참가하십시오.

var buffer = ["<a href='", url, "'>click here</a>"];
buffer.push("More stuff");
alert(buffer.join(""));

이 시도:

var s = ["<a href='", url, "'>click here</a>"].join("");

JavaScript에는 기본 StringBuffer 개체가 없으므로 이것이 사용 중인 라이브러리 또는 비정상적인 호스트 환경의 기능(예:브라우저가 아닙니다).

기본 StringBuffer 객체가 가능하더라도 (JS로 작성된) 라이브러리가 더 빠른 것을 생성할 수 있을지 의심됩니다.최종 답변은 프로파일러를 통해 찾을 수 있습니다(브라우저에서 실행 중인 경우 Firebug는 Firefox에 있는 JS 엔진에 대한 프로파일러를 제공합니다).

이미 일부 사용자가 언급한 것처럼:이는 작은 문자열에는 관련이 없습니다.

Firefox, Safari 또는 Google Chrome의 새로운 JavaScript 엔진은 다음과 같이 최적화합니다.

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

다음과 같이 빠릅니다

["<a href='", url, "'>click here</a>"].join("");

Knuth의 말에 따르면, "조기 최적화는 모든 악의 근본입니다!" 어느 쪽이든 작은 탈출은 결국 그다지 큰 영향을 미치지 않을 것입니다.나는 더 읽기 쉬운 것을 선택하겠습니다.

읽기 쉬운 방법은 코드를 볼 때 사람이 감지할 수 있는 시간을 절약하는 반면, "더 빠른" 방법은 사람들이 페이지를 탐색할 때 감지할 수 없고 무시할 수 있는 시간만 낭비합니다.

이 게시물이 형편없다는 건 알지만, 실수로 다른 스레드인 줄 알고 완전히 다른 내용을 게시했고 게시물을 삭제하는 방법을 모르겠습니다.내 잘못이야...

빠른 벤치마크를 설정하고 다음을 사용하여 Javascript 성능 변화를 확인하는 것은 매우 쉽습니다. jspref.com.이 질문을 받았을 때는 아마도 없었을 것입니다.하지만 이 질문에 대해 고민하는 사람들은 해당 사이트를 살펴보아야 합니다.

나는 다양한 연결 방법을 빠르게 테스트했습니다. http://jsperf.com/string-concat-methods-test.

나는 다음과 같은 기능적인 스타일을 사용하는 것을 좋아합니다.

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

이 스타일은 읽기 쉽고 투명해 보입니다.이는 코드의 반복을 줄이는 유틸리티 생성으로 이어집니다.

또한 중간 문자열을 자동으로 사용하는 경향이 있습니다.

내가 아는 한, 모든 연결은 메모리 재할당을 의미합니다.따라서 문제는 이를 수행하는 연산자가 아니라 연결 수를 줄이는 것입니다.예를 들어, 가능하다면 반복 구조 외부에서 연결을 수행하십시오.

예, 일반적인 벤치마크에 따르면 그렇습니다.예: http://mckoss.com/jscript/SpeedTrial.htm.

그러나 작은 문자열의 경우 이는 관련이 없습니다.매우 큰 현의 연주에만 관심이 있을 것입니다.게다가 대부분의 JS 스크립트에서는 문자열 조작이 충분하지 않기 때문에 병목 현상이 거의 발생하지 않습니다.

DOM 조작을 지켜보는 것이 좋습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top