JavaScript에는 많은 반복이있는 루프가 있으며 각 반복마다 많은 +=
연산자가 있는 거대한 문자열을 만들고 있습니다. 문자열을 만드는 더 효율적인 방법이 있습니까? 문자열을 계속 추가 한 다음 조인을 수행하는 동적 배열을 만드는 것에 대해 생각하고있었습니다. 누구나 가장 빠른 방법을 설명하고 예를 들어 줄 수 있습니까?
JavaScript에는 많은 반복이있는 루프가 있으며 각 반복마다 많은 +=
연산자가 있는 거대한 문자열을 만들고 있습니다. 문자열을 만드는 더 효율적인 방법이 있습니까? 문자열을 계속 추가 한 다음 조인을 수행하는 동적 배열을 만드는 것에 대해 생각하고있었습니다. 누구나 가장 빠른 방법을 설명하고 예를 들어 줄 수 있습니까?
답변:
JSPerf의 벤치 마크에 따르면+=
모든 브라우저에서 반드시 사용하는 것은 아니지만 사용하는 것이 가장 빠른 방법입니다.
는 DOM에서 문자열을 구축, 더 나은 것 같다 먼저 문자열을 연결 한 후보다는 반복적으로 DOM에 추가의 DOM에 추가 할 수 있습니다. 그래도 자신의 사례를 벤치마킹해야합니다.
(@zAlbee에게 감사드립니다)
+=
배열에 대한 조인과 조인 간의 차이가 거의없는 것 같습니다 .
66%
추가하는 것은 문자열을 생성 한 다음 문자열을 DOM에 추가하는 것보다 (IE9의 경우) 빠릅니다.
연결 자체에 대한 의견은 없지만 @Jakub Hampl의 제안을 지적하고 싶습니다.
DOM에서 문자열을 작성하는 경우 경우에 따라 DOM에 반복적으로 추가하는 것이 아니라 한 번에 큰 문자열을 추가하는 것이 좋습니다.
결함이있는 테스트를 기반으로하기 때문에 잘못되었습니다. 이 테스트는 실제로 DOM에 추가되지 않습니다.
이 고정 테스트 는 문자열을 렌더링하기 전에 한 번에 모두 만드는 것이 훨씬 빠르다는 것을 보여줍니다. 컨테스트도 아닙니다.
(죄송합니다. 이것은 별도의 답변이지만 아직 답변에 대한 의견이 충분하지 않습니다.)
이 질문에 답한 지 3 년이 지났지 만 어쨌든 내 대답을 제공 할 것입니다 :)
실제로 허용되는 답변이 완전히 정확하지 않습니다. Jakub의 테스트는 JS 엔진이 코드 실행을 최적화 할 수있는 하드 코드 된 문자열을 사용합니다 (Google V8이이 점에서 정말 좋습니다!). 그러나 완전히 임의의 문자열 ( 여기서는 JSPerf )을 사용하자마자 문자열 연결이 두 번째 위치에 있습니다.
템플릿 리터럴로 문자열 연결을 수행 할 수도 있습니다 . 다른 포스터의 JSPerf 테스트 를 포함하도록 업데이트 했습니다.
for (var res = '', i = 0; i < data.length; i++) {
res = `${res}${data[i]}`;
}