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.