About jsperf.com

2011. 3. 1. 22:42
이번엔  jsperf.com 사이트를 소개할까 합니다. 자바스크립트 코드블럭들(JavaScript Snippets)에 대해서 어떤 코드블럭이 더 성능이 좋은가 테스트하는 것입니다. 자바스크립트 언어의 특성상(다른 언어도 마찬가지지만) 하나의 기능을 구현할 수 있는 코드는 다양합니다. 어떤 코드가 더 성능이 좋은지는 프로파일러를 이용하거나 직접 시작 끝 속도를 측정해서 비교하는 방법 등등 여러가지가 있는데, jsperf.com 을 이용해 보는것도 좋은방법일것 같습니다.


jsperf의 측정방법
  1. 내부적으로 Benchmark JS 라이브러리를 이용하고 있습니다.
  2. jsperf 사이트에서는 사용자가 테스트하고자하는 코드블럭들을 특정 시간동안 수행하면서 얼마나 완료시키는지 측정하는 방법을 사용합니다. 많이 완료하면 할수록 성능이 좋은 코드라고 판단합니다.
  3. 브라우저별 테스트도 가능합니다.
    측정하고자 하는 브라우저에서 수행을 시키면 브라우저를 판별후에 측정을 시작합니다.

사용방법
  1. http://jsperf.com 사이트에 접속합니다.
    미리 다른 개발자들이 어떻게 테스트를 했는지 보려면 http://jsperf.com/browse에 접속해보세요.
  2. Your Detail 작성
    이 영역은 옵션이지만 Name 부분이 중요한것 같습니다.
    자신이 작성한 Test Case들을 RSS Feed로 받아볼때 유용합니다.
    이름을 기준으로 Feed가 생성이 됩니다.
    예를들어 이름을 jkyang으로 적었다면 http://jsperf.com/browse/jkyang.atom 의 형식이 됩니다.
    이 기능은 자신이 관심있어 하는 개발자의 Feed를 볼때도 유용합니다.
  3. Test Case Details
    Slug(가제목) 부분이 중요합니다.
    Slug 부분이 곧 자신이 작성한 Test Case 의 고유 링크가 되는데요.
    이 부분의 중복검사를 해주지는 않으니 Slug를 입력하고 하단 주소를 긁어서 접속해보시기 바랍니다. 404가 나오면 고유 링크라고 생각하시면 됩니다.
  4. Preparation Code
    Test Case를 돌리기 위한 HTML Code와 JS Library 를 입력합니다.
    자바스크립트 부분에는 Test Case를 돌리기 위한 사전코드(전역변수)를 입력합니다.
  5. Code Snippets to Compare
    비교하고자 하는 코드블럭을 입력합니다. 기본은 2개이고 계속 추가가 가능합니다.
    이때 중요한것은 코드블럭내의 루프문을 자제해야 합니다. 왜냐면 테스트 수행시에 해당코드 블럭을 반복적으로 수행하면서 측정을 하기 때문입니다.

결과 보기
 

  1. UserAgent
    해당 Test Case를 수행한 브라우저를 보여줍니다.
  2. #Test
    테스트 수행 횟수 
  3. UserAgent, #Test 부분을 제외한 가운데 영역
    Test Case 등록시에 코드블럭별로 입력한 제목입니다.
    숫자가 클수록 성능이 좋은걸로 판단하시면 됩니다.
  4. 여기서 1차 목적인 코드별 성능을 보실수 있구요. 2차적으로 브라우저별 성능도 차이가 있다는걸 발견할 수 있습니다.
  5. 자신의 Test Case를 공개하면 다른 개발자들도 자유롭게 Test Case를 수행할 수 있어서 도움을 줄수도 있고 자신은 더 많은 테스트 정보를 이용해서 성능을 증명할 수 있습니다.
    (Test Case 공개여부는 등록시에 기본적으로 체크되어 있습니다.)

Tip
  1. 자세한 사용설명이나 취지는 http://jsperf.com/faq 를 참고하세요.
  2. 관심 있는 테스트를 Feed로 보려면 http://jsperf.com/browse/author-name.atom 기능을 이용하세요.
  3. Test Case 수행시에 버튼을 Run Tests 버튼을 클릭하지 않고 바로 수행하고 싶다면 
    http://jsperf.com/stringmerge-plusoperator-vs-arrayjoin#run 처럼 링크 뒤에 #run을 붙여주세요.

다른 예제들도 많지만 이해를 도우려고 쉽게 작성한 예제를 소개 드립니다.
문자열을 합치는 방법중에서 + 연산자를 사용하는 방법고 배열의 Join()함수를 이용하는 방법을 테스트해봤습니다.



비회원 HTML5_JS_CSS , , ,