[자바스크립트] 최적화 #1 : for 문을 최적화해보자

일반적으로 개발자들에게 for문은 아주 익숙하다.

for ( var i = 0; i < 10;  i++){
	//do-something
}

하지만 쓰다보면 조건절 속에 단순한 숫자를 때려박는 경우는 드물고 무언가의 length, size 를 넣게 되는 경우가 많다.

for ( var i = 0; i < ojbect.length;  i++){
	//do-something
}

이런 경우 우린 최적화 할 수 있다.

매번 조건절에서 비교를 할 때에 object.length를 참조하기 때문에 이 부분을 제거한다면 최적화가 가능하다.

배열의 길이, 객체의 size에 따라 다르겠지만, 대부분의 브라우저에서 25%의 시간을 절약할 수 있다.

var test = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']

for(let i = 0; i <test.length ; i++){

}

▼▼▼

var test = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']

for(let i = 0, len =test.length; i <len ; i++){

}

 

이런 방식으로 가능하다.

선언절에 지역변수로 선언하여 참조를 한번만 하게 하고 조건절에서 지역변수를 활용하는 방법이다. 자바스크립트 성능을 비교할 수 있는 사이트에서 비교해봤다.

빠르다는 것은 알겠는데 얼만큼 빠른지는 안나와서 로그로 찍어봤다.

var nStart = new Date().getTime();      //시작시간 체크(단위 ms)

for(let i = 0; i <test.length ; i++){
    for(let i = 0; i <test.length ; i++){
        for(let i = 0; i <test.length ; i++){
            for(let i = 0; i <test.length ; i++){
                for(let i = 0; i <test.length ; i++){
                    for(let i = 0; i <test.length ; i++){
                        for(let i = 0; i <test.length ; i++){
                         
                        }
                    }
                }
            }
        }
    }
}
var nEnd =  new Date().getTime();      //종료시간 체크(단위 ms)

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

 

var nStart = new Date().getTime();      //시작시간 체크(단위 ms)

for(let i = 0, len =test.length; i <len ; i++){
    for(let i = 0, len =test.length; i <len ; i++){
        for(let i = 0, len =test.length; i <len; i++){
            for(let i = 0, len =test.length; i <len ; i++){
                for(let i = 0, len =test.length; i <len ; i++){
                    for(let i = 0, len =test.length; i <len ; i++){
                        for(let i = 0, len =test.length; i <len ; i++){

                        }
                    }
                }
            }
        }
    }
}
var nEnd =  new Date().getTime();      //종료시간 체크(단위 ms)

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

1159ms -> 1085ms로 대충 10% 가량 속도가 빨리진 것을 확인할 수 있었다. for의 경우에 조그만 중첩되어도 실행시간이 무지막지하게 길어진다. 

물론 테스트 코드처럼 7중첩되는 일은 거의 없겠다만은 조금이라도 최적화를 한다면 더 좋은 서비스를 제공할 수 있을 것이다.

오늘도 Deep한 코딩을 위해~~