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의 경우에는 어떤지 잘 모르겠다.



댓글 없음:

댓글 쓰기