일반적으로 개발자들에게 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한 코딩을 위해~~
'개발 > 자바스크립트' 카테고리의 다른 글
[자바스크립트] 크롬 개발자 도구의 좀 더 이득보는 기능들 (0) | 2020.07.30 |
---|---|
[자바스크립트] 최적화 #2 : 반복문 최적화(Duff's Device) (0) | 2020.07.29 |
[자바스크립트] 마침표 표기법, 대괄호 표기법에 대한 비교 (0) | 2020.07.27 |
[자바스크립트] =, == , === 의 차이에 대해서 (0) | 2020.07.23 |
[자바스크립트] Truthy, Falsy 애매한 이놈들에 대해서 (0) | 2020.07.20 |
댓글