JavaScript에서 문자열을 연결하는 가장 효율적인 방법은 무엇입니까?


163

JavaScript에는 많은 반복이있는 루프가 있으며 각 반복마다 많은 +=연산자가 있는 거대한 문자열을 만들고 있습니다. 문자열을 만드는 더 효율적인 방법이 있습니까? 문자열을 계속 추가 한 다음 조인을 수행하는 동적 배열을 만드는 것에 대해 생각하고있었습니다. 누구나 가장 빠른 방법을 설명하고 예를 들어 줄 수 있습니까?


2
문자열을 무엇을 사용하고 있습니까? 이에 대한 성능 팁은 환경, 문자열 크기, 특정 js 엔진이 다른 작업을 최적화하는 방법 등에 따라 달라질 수 있습니다.
Ben McCormick


5
이 링크 확인 jsperf.com/join-concat/2
rab

IE9를 사용하고 있지만 IE8 호환 모드에서 변경할 수 없습니다. 거대한 문자열은 jquery를 사용하여 DOM에 삽입 할 것입니다.
오메가

답변:


135

JSPerf의 벤치 마크에 따르면+= 모든 브라우저에서 반드시 사용하는 것은 아니지만 사용하는 것이 가장 빠른 방법입니다.

는 DOM에서 문자열을 구축, 더 나은 것 같다 먼저 문자열을 연결 한 후보다는 반복적으로 DOM에 추가의 DOM에 추가 할 수 있습니다. 그래도 자신의 사례를 벤치마킹해야합니다.

(@zAlbee에게 감사드립니다)


1
링크 된 페이지를보십시오. +=배열에 대한 조인과 조인 간의 차이가 거의없는 것 같습니다 .
Jakub Hampl

모든 문자열에 대해 DOM에 66%추가하는 것은 문자열을 생성 한 다음 문자열을 DOM에 추가하는 것보다 (IE9의 경우) 빠릅니다.
오메가

링크 된 페이지는 두 테스트 모두에 + =를 사용하고 .join ()은 보이지 않으므로 노이즈를 "차이"로만 나타내는 의미없는 테스트입니다. 시끄러운 js가 어떻게 될 수 있는지에 대한 좋은 예 ... dom은 문자열보다 느리므로 조금만 사용하십시오.
dandavis

시간은 단지 하나의 구성 요소입니다. 반복적 인 루틴의 경우 GC가 다양한 방법 사이에 어떤 영향을 미치는지 궁금합니다.
David Bradley

문자열로 CONCAT 매우 불쾌한 메모리 버그의 인해 큰 문자열의 경우, array.join이 바람직 할 수있다 bugs.chromium.org/p/v8/issues/detail?id=3175
mwag가

70

연결 자체에 대한 의견은 없지만 @Jakub Hampl의 제안을 지적하고 싶습니다.

DOM에서 문자열을 작성하는 경우 경우에 따라 DOM에 반복적으로 추가하는 것이 아니라 한 번에 큰 문자열을 추가하는 것이 좋습니다.

결함이있는 테스트를 기반으로하기 때문에 잘못되었습니다. 이 테스트는 실제로 DOM에 추가되지 않습니다.

고정 테스트 는 문자열을 렌더링하기 전에 한 번에 모두 만드는 것이 훨씬 빠르다는 것을 보여줍니다. 컨테스트도 아닙니다.

(죄송합니다. 이것은 별도의 답변이지만 아직 답변에 대한 의견이 충분하지 않습니다.)


4
나는 테스트와 결론 (테스트가 다른 대답을 기반으로 / 영감을 받았지만 괜찮을 것임)이 포함되어 있기 때문에 스스로 대답 할 가치가 있다고 생각합니다. 죄송합니다.
user202729

14

이 질문에 답한 지 3 년이 지났지 만 어쨌든 내 대답을 제공 할 것입니다 :)

실제로 허용되는 답변이 완전히 정확하지 않습니다. Jakub의 테스트는 JS 엔진이 코드 실행을 최적화 할 수있는 하드 코드 된 문자열을 사용합니다 (Google V8이이 점에서 정말 좋습니다!). 그러나 완전히 임의의 문자열 ( 여기서는 JSPerf )을 사용하자마자 문자열 연결이 두 번째 위치에 있습니다.


흥미롭게도 내 Windows 컴퓨터의 Chrome 54 및 Firefox 45에서는 concat이 버전을 사용하는 다른 두 배보다 빠릅니다. IE 11은 다른 두 브라우저에서 비 연속보다 세 가지 속도가 느립니다.
ShawnFumo

4
버전마다 다릅니다. Chrome의 VM 에이 경우에 대한 사전 최적화가 포함될 수 있습니다. Chrome v53에서 다시 테스트했으며 연결이 가장 빠른 솔루션입니다 .D 동일한 하드웨어이지만 다른 Chrome 버전은 완전히 다른 결과를 제공합니다.
Volodymyr Usarskyy

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.