이번엔 jsperf.com 사이트를 소개할까 합니다. 자바스크립트 코드블럭들(JavaScript Snippets)에 대해서 어떤 코드블럭이 더 성능이 좋은가 테스트하는 것입니다. 자바스크립트 언어의 특성상(다른 언어도 마찬가지지만) 하나의 기능을 구현할 수 있는 코드는 다양합니다. 어떤 코드가 더 성능이 좋은지는 프로파일러를 이용하거나 직접 시작 끝 속도를 측정해서 비교하는 방법 등등 여러가지가 있는데, jsperf.com 을 이용해 보는것도 좋은방법일것 같습니다.
결과 보기
jsperf의 측정방법
- 내부적으로 Benchmark JS 라이브러리를 이용하고 있습니다.
- jsperf 사이트에서는 사용자가 테스트하고자하는 코드블럭들을 특정 시간동안 수행하면서 얼마나 완료시키는지 측정하는 방법을 사용합니다. 많이 완료하면 할수록 성능이 좋은 코드라고 판단합니다.
- 브라우저별 테스트도 가능합니다.
측정하고자 하는 브라우저에서 수행을 시키면 브라우저를 판별후에 측정을 시작합니다.
사용방법
- http://jsperf.com 사이트에 접속합니다.
미리 다른 개발자들이 어떻게 테스트를 했는지 보려면 http://jsperf.com/browse에 접속해보세요. - Your Detail 작성
이 영역은 옵션이지만 Name 부분이 중요한것 같습니다.
자신이 작성한 Test Case들을 RSS Feed로 받아볼때 유용합니다.
이름을 기준으로 Feed가 생성이 됩니다.
예를들어 이름을 jkyang으로 적었다면 http://jsperf.com/browse/jkyang.atom 의 형식이 됩니다.
이 기능은 자신이 관심있어 하는 개발자의 Feed를 볼때도 유용합니다. - Test Case Details
Slug(가제목) 부분이 중요합니다.
Slug 부분이 곧 자신이 작성한 Test Case 의 고유 링크가 되는데요.
이 부분의 중복검사를 해주지는 않으니 Slug를 입력하고 하단 주소를 긁어서 접속해보시기 바랍니다. 404가 나오면 고유 링크라고 생각하시면 됩니다. - Preparation Code
Test Case를 돌리기 위한 HTML Code와 JS Library 를 입력합니다.
자바스크립트 부분에는 Test Case를 돌리기 위한 사전코드(전역변수)를 입력합니다. - Code Snippets to Compare
비교하고자 하는 코드블럭을 입력합니다. 기본은 2개이고 계속 추가가 가능합니다.
이때 중요한것은 코드블럭내의 루프문을 자제해야 합니다. 왜냐면 테스트 수행시에 해당코드 블럭을 반복적으로 수행하면서 측정을 하기 때문입니다.
- UserAgent
해당 Test Case를 수행한 브라우저를 보여줍니다. - #Test
테스트 수행 횟수 - UserAgent, #Test 부분을 제외한 가운데 영역
Test Case 등록시에 코드블럭별로 입력한 제목입니다.
숫자가 클수록 성능이 좋은걸로 판단하시면 됩니다. - 여기서 1차 목적인 코드별 성능을 보실수 있구요. 2차적으로 브라우저별 성능도 차이가 있다는걸 발견할 수 있습니다.
- 자신의 Test Case를 공개하면 다른 개발자들도 자유롭게 Test Case를 수행할 수 있어서 도움을 줄수도 있고 자신은 더 많은 테스트 정보를 이용해서 성능을 증명할 수 있습니다.
(Test Case 공개여부는 등록시에 기본적으로 체크되어 있습니다.)
Tip
- 자세한 사용설명이나 취지는 http://jsperf.com/faq 를 참고하세요.
- 관심 있는 테스트를 Feed로 보려면 http://jsperf.com/browse/author-name.atom 기능을 이용하세요.
- Test Case 수행시에 버튼을 Run Tests 버튼을 클릭하지 않고 바로 수행하고 싶다면
http://jsperf.com/stringmerge-plusoperator-vs-arrayjoin#run 처럼 링크 뒤에 #run을 붙여주세요.
다른 예제들도 많지만 이해를 도우려고 쉽게 작성한 예제를 소개 드립니다.
문자열을 합치는 방법중에서 + 연산자를 사용하는 방법고 배열의 Join()함수를 이용하는 방법을 테스트해봤습니다.
반응형
