[JavaScript] 코드 성능 테스트/비교 사이트(Naver)

네이버에서 제공하는 자바스크립트 코드 성능 비교 사이트입니다. http://jindo.dev.naver.com/jsMatch/index.html

1. 사전코드 : 각 코드를 실행하기 전에 수행되는 코드 입니다. 배열 설정이나 element 추가 같은 내용을 담을 수 있습니다.

   this 객체에 넣게 되면 비교 코드에서 this 객체로 접근하여 사용할 수 있습니다.

2. 사후코드 : 각 코드를 실행한 후에 수행되는 코드 입니다. element 제거 같은 후처리를 위한 내용을 담을 수 있습니다.

3. HTML : HTML 마크업을 사용해야 한다면 아래 마크업을 입력해 주세요. <div id="html"> 에 innerHTML로 삽입되고,

   코드에서는 this.elHTML로 사용하실 수 있습니다. 테스트가 끝나면 비워집니다.

   외부 script를 로딩할 때에는 아래에 스크립트 URL을 입력해 주세요. URL을 콤마(,)로 여러개를 입력하실 수 있습니다.

4,5. 비교 대상 코드를 입력합니다.

6. 비교 할 코드를 추가할 수 있습니다.

7. 코드 작성 후 비교하기 버튼을 누르면  테스트가 시작됩니다.

8. 테스트 실행 후 결과가 나타납니다.

   그래프를 참고하면 forEach문이 for문보다 시간이 더 소요되는것을 확인 할 수 있습니다.

9. URL보기 버튼을 클릭하면 상단에 아래와 같은 화면이 표출됩니다.

   간단한 설명과 등록자를 적은 뒤 확인 버튼을 누르면 공유 가능한 URL과 QR 코드가 생성됩니다.

생성된 QR 코드로 모바일 브라우저에서도 성능 체크가 가능하다고 하니 아주 유용할 것 같습니다.

*예제 링크 : http://jindo.dev.naver.com/jsMatch/index.html?d=385

아래는 크롬 오픈소스 기반의 웨일 브라우저에서 모바일 버전으로 테스트 한 화면입니다.

결과에 브라우저 별로 나뉘어 나타나는것을 볼 수 있습니다.