자바스크립트에서 문자열을 합치는 방법 > script

HTML String을 직접 생성하는 예제의 경우 JavaLanguage의 StringBuffer나 DotNetFramework의 StringBuilder 같은 개념을 사용하면 성능을 크게 개선할 수 있습니다. 특히 Rendering하려는 데이터가 많을 경우엔 더욱 그렇죠. 응답 속도를 1~2초 이상 향상시킬 수 있습니다. 테이블을 재정렬하거나 하기 위해 전체를 다시 그릴 때 사용성 측면에서 특히 중요합니다.

간단히 만들어보면 대략 이렇게 됩니다:

자바스크립트에서 두 문자열을 하나로 합치고 싶을때는 + 연산자로 간단히 합칠 수 있다. 다른 언어에서도 마찬가지지만 좀 저수준에서 바라보면 문자열을 합치는 작업은 앞쪽 문자열의 끝부분을 찾아서 그 뒤에 뒤쪽 문자열을 붙이는 방법이기 때문에 앞쪽 문자열이 길수록 작업시간이 늘어난다. 그래서 거대한 양의 HTML 코드를 동적으로 생성해 + 연산자로 이어붙여 innerHTML 메소드로 넣어줄때는 문자열이 길어질 수록 길이의 제곱에 비례해 시간이 늘어나는 걸 볼 수 있다.

자바의 경우는 이 문제를 StringBuffer라는 객체를 사용해 해결한다. 일정 공간의 버퍼를 만들고 여기에 문자열을 추가하면서 버퍼가 모자라면 지금 할당된 버퍼의 용량을 두배로 늘려 사용하는 단순한 방법인데 속도가 상당히 향상된다.

자바스크립트에서는 메모리를 직접 다루는게 불가능하기 때문에 이런 방법은 쓰기 힘들고, 추가할 문자열을 실제로 이어붙이는게 아니라 배열에 임시로 넣어두었다가 필요할때 합쳐서 쓰는 방법을 사용한다. 배열에 문자열을 집어넣는건 문자열의 길이와 상관없이 항상 일정한 시간이 걸리기 때문에 최종적으로 문자열을 하나로 합치는 시간에서만 문자열의 길이에 비례한 시간이 소요된다.

Example. http://crizin.net/work/demo/stringBufferExample.html

prototype을 선언해서 좀 더 우아하게 쓸 수도 있다.

Example. http://crizin.net/work/demo/stringBufferPrototypeExample.html
(참고 : Java Script String Buffer)

아무튼 저런식으로 문자열을 다루면 극한 상황일수록 많은 시간을 줄일 수 있게된다. IE의 경우에는 대략 몇십배씩 차이가 나는데 파이어폭스나 오페라 같은 경우는 두 방법의 차이가 거의 없다. 아마 내부적으로 + 연산자를 StringBuffer로 처리하는게 아닌가 추측됨. (오페라의 경우에는 최적화가 잘 돼 있는지 오히려 + 연산자가 더 빠르다)

Demo : http://crizin.net/work/demo/stringBenchmark.html