Javascript Performance Test - JsPerf

Javascript Performance Test

참조 URL

1. http://jsperf.com/
2. http://jsperf.com/faq#what
   
3. http://jsperf.com/browse
   
4. http://jsperf.com/jstest453534 - 2013.05.25일 6시간 전에 만든 테스트 케이스라서 링크가 깨질수도 있음.
   
5. http://jsperf.com/dom-vs-innerhtml-based-templating/729
   

 필자가 개인적으로 생각하기에 Node.js가 나오고 나서부터 자바스크립트 프레임워크의 제2의 전성기가 도래된듯 싶다. Ajax를 통해 브라우저에서 조명을 받았다면 지금은 서버사이드 기술과 Template renderning, MVC Framwork, ... 같은 많은 종류의 구조화 지원 도구가 나오고 있다. 이런 시대상 때문에 비슷한 기능을 지원하는 스크립트들이 많이 나오고 있으나 개인적인 개발자 입장에서는 행복한 고민에 빠지지 않을 수 없다. 똑똑하고 편리하게 사용할 수 있는 자바스크립트 프레임웍이 많다 보니 선택을 하기고 힘들고 일일이 알아보고 비교하기도 힘들다. 

 이 힘들 작업을 인터넷이라는 세계 공동체 안에서 미리 시작한 사이트가 있으니 바로 "JsPerf.com" 이다. 비슷한 자바스크립트 프레임웍을 선별하여 퍼포먼스 테스트를 하면서 결과로 통계 데이터도 보여주고 있다. 내가 테스트한 데이터도 실시간으로 반영이 되고 있다.

 그렇지만 모든 성능 테스트가 마찬가지로 한정된 목표와 제한된 시스템 안에서 진행되기 때문에 결과에 맹신은 금물이다. 각각의 자바스크립트 프레임웍마다 지향하는 철학과 쓰임새가 다르게 추구하고 있기 때문에 절대적인 비교 보다는 참고용과 테스트 방법과 예제에 대한 참고 정도만 하면 될 것이다. 

 이제 간단한 페이지에 대해 설명 하면서 JSPerf가 어떤 것이라는 것을 아래 그림으로 간단하게 설명 하도록 하겠다.

'http://jsperf.com/jstest453534'은 jQuery에서 

• $('li').first().text();
• $('li:first').text();

두 문법에 대한 성능 차이를 알아 보는 페이지다. '그림1', '그림2'에서와 같이 준비된 코드가 있고 '그림3'과 같은 화면에서 'Run Tests'를 누르면 테스트가 진행이 된다. 가끔 javascript 로딩 문제로 에러가 발생할 수 있으니 IE나 Chrome을 번갈아 가면서 테스트를 해보고 브라우저 마다 스크립트의 성능 차이도 비교해 보기를 바란다.

[그림1] 준비 코드

[그림2] 렌더링 된 준비 코드

[그림3] 테스트 준비 화면

 '그림4'는 테스트가 된 결과 화면이며 '그림5'는 테스트 결과에 총 집계 차트다. 이 차트를 통해 나름 일반적인 통계치를 얻을 수 있을 것이다.

[그림4] 테스트 결과 화면

[그림5] 결과에 대한 통계 차트