서영이네집 ::

2010/10/26 23:34

[javascript] 성능향상 팁

개발 이야기/JavaScript 2010/10/26 23:34

일반적으로 개발자들은 자바스크립트를 사용할 때 성능을 생각하고 코딩하는 경우는 거의 없습니다.

하지만 코딩을 하다보면 가끔씩 많은 정보를 자바스크립트로 제어해야 할 경우가 있습니다. 특히 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/ 에서 여러가지 브라우저를 실행한 후 아래 페이지를 방문해 보세요.

http://devpro.it/examples/loopsbench/

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'개발 이야기 > JavaScript' 카테고리의 다른 글

[javascript] 성능향상 팁 (2)	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

JavaScript, Performance, 성능, 자바스크립트

0 2

2010/10/05 23:16

[log4sql] slf4j를 적용해서 파일로 저장하기

개발 이야기/Java 2010/10/05 23:16

2008년 말 log4sql 을 소개한 포스팅을 작성했었습니다. 그때 log4sql은 sql을 콘솔에 찍어주는 기능만 있었습니다.

그래서 저는 콘솔의 내용을 전부 파일로 저장하는 방법을 사용하기도 했습니다.

그리고 2009년 말에는 common-logging 라이브러리를 적용한 블로거 분도 계셨습니다. 그때 당시만 해도 sql을 파일로 저장할 필요성을 별로 못느꼈기 때문에 별로 관심이 없었습니다. 그런데 요즘 배치 개발을 많이 하다 보니 콘솔에 엄청나게 찍히는 sql을 감당할 수가 없더군요. 그래서 slf4j를 사용한 log4sql을 만들게 되었습니다.

여기서 잠깐~ slf4j를 잘 모르시는 분은 여기를 참조하세요.

기본적인 사용법은 기존 log4sql의 사용법과 동일합니다.

달라진 점들

설정 porperties 파일 위치와 명칭 변경
/core/log/log4sql_configuration.properties => /log4sql.properties
properties 파일을 라이브러리 밖으로 빼서 properties의 수정을 용이하게 했습니다.
log4sql.properties에서 log.slf4j.use=ture 항목의 값을 true, false로 설정함으로써 sql의 파일 저장을 설정할 수 있게 되었습니다.

아래는 저장된 로그파일 샘플입니다.

[2010-10-06 21:40:46] [SL] [547] [DEBUG] 『net.teracube.folder.FolderAction:excute(53)』 Elapsed Time [0:00:00.002]

    SELECT
        * 
    FROM
        TC_FOLDER 
    WHERE
        PARENT_FOLDER_ID =  2 /**P*/ 
        AND USER_ID =  1 /**P*/ 

 
[2010-10-06 21:40:46] [CheckAuthFilter] [37] [DEBUG] doFilter() auth :  
[2010-10-06 21:40:46] [FolderDispatcher] [46] [DEBUG] doFilter() viewUrl : /WEB-INF/jsp/json/json.jsp

소스 파일과 로그 등은 http://github.com/hyunjun19/log4sql-slf4j 여기를 방문하시면 됩니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'개발 이야기 > Java' 카테고리의 다른 글

[log4sql] slf4j를 적용해서 파일로 저장하기 (3)	2010/10/05
System.out.println()은 잊어라 log4sql이 온다. (4)	2010/10/03
[Tomcat5] 톰캣 Context 설정하기 (0)	2010/09/26
[MySQL] MySQL에서 log4sql이 동작하지 않을 때 해결방법 (2)	2010/03/22
콘솔의 내용을 파일로 자동저장하기 (0)	2009/11/15
제우스에서 log4sql 사용하기 (4)	2009/07/29

log4sql, SLF4J, SQL, sql debugging, sql 로그

0 3

2010/10/05 22:49

서연이 돌이에요 ~ ^^ (0)	2010/10/05
박서연 50일 (0)	2010/01/15
서영이의 동생이 태어났습니다. (0)	2009/11/05
서영이 돌 사진 (0)	2008/12/11
서영이가 좋아하는 놀이터는 ? (0)	2008/11/16
서영이네 집에 오신것을 환영합니다. >_< (0)	2008/11/10

System.out.println()은 잊어라 log4sql이 온다.

개발 이야기/Java 2010/10/03 23:20

log4sql은 많이 알려지진 않았지만 상당히 유용한 sql 로거입니다. 만든 분은 송인섭이라는분인데 한국분이신것 같습니다.

기존에 우리는 sql을 디버깅 하기 위해서 대부분 System.out.println()을 사용했습니다. log4j를 이용해서 sql을 콘솔에 찍기도 하고 jdbc관련 클래스를 만들어서 사용하는 경우에도 결국엔 System.out.println()을 사용하게 됩니다. 하지만 sql을 이렇게 콘솔로 표현하게 되면 여러가지 불편한 점들이 생깁니다.
가장 큰 문제점이 바로 소스는 소스대로, 콘솔은 콘솔대로 가독성이 떨어지게 됩니다. 소스상에서 System.out을 사용하게되면 개발이 끝나도 운영에 들어가게되면 이 부분을 주석처리하거나 다른 설정을 하게됩니다.
또한 콘솔에서 보여질때 sql을 소스상에서 들여쓰기를 해주지 않았다면 단순한 sql은 괜찮지만 복잡한 sql은 볼때마다 매번 들여쓰기를 해주어야 한다는 단점이 있습니다. log4sql은 이러한 문제를 해결하기 위해서 간단히 드라이버 설정만 바꿔주면 System.out.println()을 사용하지 않아도, 소스상에서 들여쓰기를 해주지 않아도 콘솔에 예쁘게 들여쓰기가 된 sql을 보여줍니다.

log4sql이 뭔가요?

간단하게 log4sql이 무엇인지 백번 설명을 하기보다는 한번 보는게 확실히 이해하기 쉬울꺼 같습니다.

저 노란색 박스안에 나타난 내용이 log4sql에서 자동으로 찍어준 내용입니다. sql이 실행된 시간과 실행된 메소드, sql이 실행되는데 소요된 시간, 실행된 sql을 자동으로 들여쓰기를 해서 보여주고 있습니다.

log4sql의 장점

1. 자동 들여쓰기

일반적으로 콘솔에 들여쓰기가 된 sql을 보려면 다음과 같은 코드를 작성해야 했습니다.

StringBuffer  var11 = new StringBuffer();

var11.append("SELECT * \n");

var11.append(" FROM   emp \n");

var11.append(" WHERE  deptno = '30' \n");

하지만 더이상 이런 부분은 신경 쓰지않아도 됩니다. log4sql을 사용한다면 말이죠.

2. 페이지 반응속도가 느리다구요?

log4sql은 쿼리가 실행되는데 걸린 시간을 표시해줍니다. 어느 부분이 느린지 어느 쿼리가 느린지 콘솔을 보기만 하면 알 수 있습니다.

3. 이 쿼리가 어디서 날린 쿼리지?

log4sql은 쿼리가 실행된 메소드도 표시해 줍니다. 하지만 쿼리를 날리는 클래스를 별도로 두고 해당 클래스를 이용해서 쿼리를 날리게 되면 log4sql도 어쩔수 없답니다.^^;;

어떻게 사용하나요?

간단합니다. JDBC 관련 설정에서 드라이버 설정만 바꿔주면 됩니다. 예를 들어 오라클을 사용하는 경우 기존에 'oracle.jdbc.drirver.OracleDriver' 드라이버를 사용했다면 'core.log.jdbc.driver.OracleDriver'로 바꿔주기만 하면 됩니다. 이제 log4sql을 사용할 준비가 된겁니다. 이제 WAS를 올리고 콘솔을 한번 보세요. sql이 깔끔하게 정리되어서 나타날꺼에요.^^
다른 디비를 사용하시는 경우에는 log4sql 홈페이지에서 확인하시면 됩니다.

다음에는 log4sql의 상세 설정에 대해서도 알아보도록 하겠습니다.

log4sql은 sql을 파일로 저장하는 기능이 없습니다. 하지만 대신 콘솔의 내용을 파일로 저장하는 방법을 사용하면 파일로 저장할 수 있습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'개발 이야기 > Java' 카테고리의 다른 글

[log4sql] slf4j를 적용해서 파일로 저장하기 (3)	2010/10/05
System.out.println()은 잊어라 log4sql이 온다. (4)	2010/10/03
[Tomcat5] 톰캣 Context 설정하기 (0)	2010/09/26
[MySQL] MySQL에서 log4sql이 동작하지 않을 때 해결방법 (2)	2010/03/22
콘솔의 내용을 파일로 자동저장하기 (0)	2009/11/15
제우스에서 log4sql 사용하기 (4)	2009/07/29

Debug, Debugging, LOG4J, log4sql, Logger, Logging, SQL, sql debugging

0 4

서영이네집

검색결과 리스트

2010/10 에 해당되는 글 4건