[자바스크립트] 최적화 #3 문자열 최적화 (+병합, 배열병합)

2020/07/27 - [개발/자바스크립트] - [자바스크립트] 최적화 #1 : for 문을 최적화해보자

2020/07/29 - [개발/자바스크립트] - [자바스크립트] 최적화 #2 : 반복문 최적화(Duff's Device)

이전 글에 이어 오늘은 문자열 최적화 하는 방법에 대해 살펴보겠습니다.

문자열을 병합하는 방법은 많이 있습니다.

대표적으로 +, join, concat 등이 있습니다.

만약 아래와 같은 코드가 있다고 해보겠습니다.

str += 'first' + 'second';

지극히 직관적인 코드입니다. 원래 있는 string (str)에 firstsecond를 추가하는 코드입니다.

이런 식의 코드는 다음과 같이 최적화가 가능합니다.

str += 'first';
str += 'second';

이런식으로 하게 되면 뭔가 무의미한 코드 늘여쓰기 느낌이 나지만 최적화 관점으로 본다면 first+second를 위한 메모리 할당 과정이 생략되고 바로 문자열 병합이 이뤄지기 때문에 25% 정도의 최적화가 가능합니다.

var nStart = new Date().getTime();      //시작시간 체크(단위 ms)
var str = "";
for(let i = 0; i <10000000 ; i++){
   str += "first";
   str +="second";
}
var nEnd =  new Date().getTime();      //종료시간 체크(단위 ms)

var nDiff = nEnd - nStart;      //두 시간차 계산(단위 ms)
console.log(nDiff) //3619ms

 

var nStart = new Date().getTime();      //시작시간 체크(단위 ms)
var str = "";
for(let i = 0; i <10000000 ; i++){
   str += "first"+"second";
}
var nEnd =  new Date().getTime();      //종료시간 체크(단위 ms)

var nDiff = nEnd - nStart;      //두 시간차 계산(단위 ms)
console.log(nDiff) // 1812ms

원서상으로는 위의 경우가 훨씬 빨라야하는데 테스트 결과 다르게 나와 이부분은 추가로 찾아본 뒤 정정하겠습니다.

 

두번째로는 배열을 이용한 문자열 병합입니다.

var nStart = new Date().getTime();      //시작시간 체크(단위 ms)
var str = '123456789';
var newStr= '';
var append = 10000000;

while(append--){
    newStr+=str;
}
var nEnd =  new Date().getTime();      //종료시간 체크(단위 ms)

var nDiff = nEnd - nStart;      //두 시간차 계산(단위 ms)
console.log(nDiff) //1551ms

 

var nStart = new Date().getTime();      //시작시간 체크(단위 ms)
var str = '123456789';
var strs=[];
var newStr= '';
var append = 10000000;

while(append--){
    strs[strs.length]=str;
}
newStr = strs.join('');
var nEnd =  new Date().getTime();      //종료시간 체크(단위 ms)

var nDiff = nEnd - nStart;      //두 시간차 계산(단위 ms)
console.log(nDiff) // 612ms

이런 성능 차이를 보여주는 이유는, 

newStr += str의 경우 newStr의 전체 크기를 복사하고 값을 넣는 로직이 들어갑니다. 

하지만, 최적화된 코드는

strs[strs.length] = str 부분에서 strs.length가 점점 증가하며 자연스럽게 배열의 크기를 늘려가며 값을 넣고 마지막에 합치기 때문에 전체 크기를 복사하는 로직이 빠진 상태여서 훨씬 빠릅니다.