레이블이 성능인 게시물을 표시합니다. 모든 게시물 표시
레이블이 성능인 게시물을 표시합니다. 모든 게시물 표시

2010년 12월 7일 화요일

Better for Loops Pattern in javascript

javascript에서 for Loops를 사용할 경우에 이제껏 다음과 같이 사용했다.

for(var i = 0; i < myArray.length; i++) {
    do something with myArray[i];
}


JavaScript Patterns 에서는 이런 방식의 사용이 성능에 아주 좋지 않은 영향을 미친다고 한다.
특히 DOM과 관련된 array를 다루는 경우에는 특히 그 영향이 크다고 할 수 있다.

document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()

이런방식으로 반환되는 Array의 경우이다. 이런경우에는 다음과 같이 사용하는 것이 좋다.

var i = 0,
     max,
     myarray = [];
// ...
for (i = 0, max = myarray.length; i < max; i++) {
    // do something with myarray[i]
}

이럴 경우 Safari3 브라우저에서는 2배, IE7에서는 190배 빠르다고 한다.
이유는 length를 가져오는 로직이 시간이 걸리기 때문이다.

참고로 성능이 매우 중요한 프로그램에서는 다음과 같이 성능 향상도 가능하다.

var i, myarray = [];
for (i = myarray.length; i--;) {
    // do something with myarray[i]
}

또는

var myarray = [],
      i = myarray.length;
while (i--) {
    // do something with myarray[i]
}

Prototype 이나 JQuery 같은 Javascrip 라이브러리의 DOM 관련 fuction의 경우에는 어떤지 잘 모르겠다.