검색결과 리스트
2010/10/26에 해당되는 글 1건
- 2010/10/26 [javascript] 성능향상 팁 (3)
글
일반적으로 개발자들은 자바스크립트를 사용할 때 성능을 생각하고 코딩하는 경우는 거의 없습니다.
하지만 코딩을 하다보면 가끔씩 많은 정보를 자바스크립트로 제어해야 할 경우가 있습니다. 특히 Enterprise Solution을 개발할 때 이런 상황을 자주 직면하게 됩니다.
그래서 간단하지만 효과적인 javascript 성능향상 팁을 정리해 보았습니다.
Tip 1. 반복문
여러분은 반복문을 사용하실 때 어떤 구문을 사용하시나요?
보통 가장 기본적인 아래와 같은 반복문을 가장 많이 사용하실겁니다.
for(i=0; i<array.length; i++)
이 반복문은 책이나 예제로 많이 사용되어 집니다.
하지만 이 반복문에는 단점이 하나 있습니다. 그것은 이 구분을 반복할 때 마다 array.length 메소드가 매번 호출된다는 점입니다.
while 문에서도 아래와 같이 사용하면 array.length가 매번 호출됩니다.
i=0; while(i<array.length)
이 부분에서 성능을 향상하기 위해서는 아래처럼 array.length를 꼭 변수에 담아 사용하시기를 권합니다.
var cnt = array.length;
for (i=0; i<cnt; i++)
Tip 2. + 연산자
var str;
for (i=0; i<10000; i++) {
str += 'prefix'+i+'suffix';
}
위 구문은 반복 횟수가 적을 때는 아무런 문제가 없습니다. 하지만 1000건을 넘어가면 몇 초동안 화면이 굳어버리게 됩니다.
이럴 경우에는 array와 join메소드를 사용하시면 됩니다.
var strArray = [];
for (i=0; i<10000; i++) {
strArray.push('prefix', i, 'suffix');
}
var str = strArray.join('');
이 방법을 사용하게 되면 +를 사용할 때 보다 훨씬 빠른 결과를 얻을 수 있습니다.
Tip 3. DOM : createElement(), appendChild()
var lo = document.createElement('lo');
for (i=0; i<100; i++) {
lo.appendChild(document.createElement('li'));
}
document.body.appendChild(lo);
위 예제에서는 lo 객체에 childNode로 li 100개를 생성하고 있습니다.
이 예제에서 개선될 점은 두 가지 입니다.
하나는 반복문 안에서 appendChild를 사용했다는점이고 두 번째 역시 반복분 안에서 createElement를 사용했다는 점입니다.
위 예제를 개선하면 다음과 같습니다.
var lo = document.createElement('lo');
var arrayLi = [];
for (i=0; i<100; i++) {
li.push('<li>', '</li>');
}
lo.innerHTML = li.join('');
document.body.appendChild(lo);
appendChild 대신 2번 팁이 사용되었군요. 그리고 createElement가 아니라 innerHTML이 사용되었습니다.
이 방법은 appendChild, createElement로 인해 발생되는 부하를 극적으로 줄여주게 됩니다.
저는 이 방법을 통해서 2분이 걸리던 작업을 10초만에 나오도록 개선한 적이 있습니다.
그리고 이보다 훨씬 많은 성능향상팁이 있지만 가장 효과적인 세 가지만 적어보았습니다.
다른 팁들은 성능 향상의 폭이 적어서 거의 극한 튜닝에나 쓰일법한 기법이 많고 또 브라우저 마다 효과가 약간씩 다르기 때문 입니다.
주의하실점은 이 팁들은 IE6에서 가장 큰 효과가 있습니다. 하지만 IE8이나 최신버전의 chrome, FireFox등에서는 거의 차이가 없습니다.
직접 테스트를 해보고 싶으시면 http://spoon.net/Browsers/ 에서 여러가지 브라우저를 실행한 후 아래 페이지를 방문해 보세요.
'개발 이야기 > JavaScript' 카테고리의 다른 글
| [javascript] 성능향상 팁 (3) | 2010/10/26 |
|---|---|
| [extjs] Ext.Window가 IE에서 width가 너무 길어지는 문제 (0) | 2010/09/26 |
| [extjs] Ext.MessageBox 클래스의 height가 비정상적으로 길어질때... (0) | 2010/09/26 |
| [extjs] Ext.Window가 IE에서 width가 너무 길어지는 문제 (0) | 2010/03/08 |
| [extjs] Ext.MessageBox 클래스의 height가 비정상적으로 길어질때... (0) | 2010/03/03 |
| [extjs] extjs에서 iframe 사용하기 (0) | 2010/03/03 |
RECENT COMMENT