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

어제 워크샵에서 배운 것들을 이것 저것 해보는 중인데 그 중 StringBuffer의 성능에 대해 간단히 벤치마킹 해본 결과를 적어본다. 진작에 좀 알았으면 좋았을 것을..;

자바스크립트에서 두 문자열을 하나로 합치고 싶을때는 + 연산자로 간단히 합칠 수 있다. 다른 언어에서도 마찬가지지만 좀 저수준에서 바라보면 문자열을 합치는 작업은 앞쪽 문자열의 끝부분을 찾아서 그 뒤에 뒤쪽 문자열을 붙이는 방법이기 때문에 앞쪽 문자열이 길수록 작업시간이 늘어난다. 그래서 거대한 양의 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

그래서 결론은 IE7이 빨리 나오길 바란다는 것으로 마무리;;