2009/03/21 19:23
 얼마전 사파리4 베타가 발표되었습니다.

 이전 사파리 3는 윈도우에서 한글폰트에 안티알리어싱을 사용할 때 가독성에 문제가 있다는 지적이 많이 있었으며 저도 익숙하지 않아서 한동안 설치만 해놓고 사용하지 않고 있었습니다.

 하지만 오늘 사파리4 베타버전을 설치해보니 폰트의 가독성 문제는 깔끔히 해결되어 있었습니다. 그리고 더불어 Nitro라는 엔진을 사용해서 렌더링 속도를 향상 시켰습니다.

 평소에 불여우3.0을 사용했었는데 불여우3.0 보다 체감상 빨랐습니다. 하지만 이 포스트에서는 브라우저의 렌더링 속도가 주제가 아닙니다.

 현재 FireBug는 웹 개발자들 사이에서 모르면 간첩이라는 소리를 들을 정도로 웹 UI 개발에 상당한 편의성을 제공합니다. 그런데 오늘 보니 사파리에서도 그런 기능을 제공하더군요. Web Inspector란 이름을 가진 이 툴은 사실상 FireBug에서 제공하는 거의 모든 기능을 제공합니다. 우리나라 말로는 개발자 도구라고 하나 봅니다.

 사실 Web Inspector는 WebKit에서 제공하는 기능입니다. 따라서 WebKit을 사용한 브라우저는 모두 이러한 디버거 기능을 제공할 수 있다는 이야기가 됩니다. 다만 브라우저에서 지원하지 않으면 사용할 수 없습니다.

 구글의 크롬같은 경우 WebKit을 사용하지만 모든 디버깅 기능을 지원하지는 않습니다.

 
그럼 사파리의 디버깅 기능을 볼까요?
 
 
플래이 버튼을 누르시면 플레이 됩니다.

 FireBug는 추가적으로 플러그인들을 설치하면 보다 다양한 기능들을 활용할 수 있지만 기본 기능만을 보자면 오히려 Web Inspector가 더 다양하다고 볼 수 있습니다.

 앞으로 웹 디버거의 판도가 어떻게 변할지 많이 기대가 됩니다. ^^

# 사파리 기본 설정으로는 개발자 도구가 나타나지 않습니다.
Preference > Advanced 에서 Show Develop menu in menu bar 메뉴를 체크해 주시면 됩니다.

1. Preference를 선택합니다. Ctrl + ,를 누르셔도 됩니다.
사용자 삽입 이미지


2. Advanced 탭에서 Show Develop menu in menu bar 항목을 체크해 줍니다.
사용자 삽입 이미지



사용자 삽입 이미지

3. 이제 화면에서 우클릭을 하시면 Inspect Element 메뉴를 볼수 있습니다.

화면상에서 Inspect Element를 실행하면 다음 이미지와 같은 Web Inspector를 볼 수 있게 됩니다.






4. Web Inspector는 Firebug를 써보신 분이시라면 쉽게 사용하실 수 있을 껍니다.
사용자 삽입 이미지


크리에이티브 커먼즈 라이선스
Creative Commons License
2009/01/14 01:44

DWR

DWR은 자바 라이브러리로서 Direct Web Remoting의 약자입니다. Java에서 Ajax를 쉽게 사용하기 위한 라이브러리로서 서버에 있는 Java소스를 스크립트로 바로 호출 할 수 있도록 해줍니다. 이는 기존의 다른 Ajax에서 서버에서 데이터를 받아오기 위한 페이지를 만들 필요가 없기 때문에 개발의 편의성을 높여줍니다.

prototype.js

프로토 타입은 모르는 사람이 없을 정도로 유명한 javascript framework입니다. 코드를 간결하게 해주고 웹 브라우저에 따른 별도의 javascript 코드를 작성하지 않아도 됩니다.


DWR VS prototype.js Ajax performance 비교

그렇다면 DWR과 prototype.js의 Ajax 성능은 어떨까요? 직접 테스트 해볼까요?
참고로 이 테스트는 제 개인적인 호기심으로 한 테스트입니다. 테스트 방법 및 신뢰도에 대한 부분은 전혀 보장하지 않습니다. : )

테스트 환경

JRE : 1.6.0_11
브라우저 : FireFox
측정 툴 : FireBug
※ 모든 테스트 결과 수치는 ms(1/1000초)입니다.
테스트 1 : 1초 간격으로 호출을 해서 응답시간을 측정합니다.
이 테스트는 한번의 Ajax 응답이 오는 시간을 측정하는 테스트입니다.

DWR 테스트 결과
사용자 삽입 이미지

 prototype.js 테스트 결과
사용자 삽입 이미지


DWR prototype.js
1 27 47
2 31 26
3 38 29
4 34 32
5 31 56
6 55 57
7 26 23
8 40 45
9 62 50
10 61 48
평균 40.5 41.3
수치상으로만 보면 둘다 비슷 비슷 하네요. 하지만 테스트2에서 부하가 걸린 상황에서는 조금 다를껍니다.
그리고 그림을 보시면 DWR과 prototype.js의 Ajax 방식에서 차이점이 보이실껍니다.
DWR은 POST 방식을 사용하고 있고 prototype.js는 GET 방식을 사용하고 있네요.


테스트 2 : 100번을 연속으로 호출해서 모든 응답이 올때까지의 시간을 측정합니다.
이 테스트는 부하 테스트입니다. 한번에 많은 양의 요청을 얼마나 빨리 처리할 수 있는가를 측정합니다.

DWR 테스트 결과
사용자 삽입 이미지
DWR은 100개의 응답이 오는데 3.38초가 걸렸네요.

prototype.js 테스트 결과
사용자 삽입 이미지
prototype.js는 100개의 응답을 받는데 1.67초가 걸렸네요. 4번째 요청이 제일 늦게 응답을 받았는데 1.67초가 걸렸습니다.

테스트 결과 분석

부하가 걸리지 않는 상황에서는 DWR이나 prototype.js의 성능상의 차이는 거의 없습니다. 하지만 부하가 걸리는 상황에서는 prototype.js의 성능이 DWR보다 월등한 성능을 보여주고 있습니다.
 하지만 이는 GET방식과 POST방식으로 인한 차이일 수도 있으며 DWR과 prototype.js의 메모리 사용률도 조금달랐습니다. DWR은 메모리가 일정 수치 이상 올라가면 메모리 사용량이 일정 수치 이상 올라가지 않는 것으로 보아 가비지 컬렉터가 수행되는 것 갔았으며 prototype.js는 메모리 사용률이 계속 올라갔습니다. 이 부분에 대해서는 별도의 테스트가 필요한것 같습니다.
 만약 Ajax 컴포넌트를 선택하는 상황이라면 성능상으로는 prototype.js이 뛰어날 지라도 DWR의 개발시 편의성과 메모리 사용률도 무시하지 못할 부분이라고 생각됩니다.

※ 참고로 이 포스트에서 보여드린 테스트는 한번 밖에 수행하지 않았지만 결과를 기록하지 않은 테스트가 여러번 수행되었으며 위 결과와 비슷한 수치를 보였습니다.

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