[출처] https://msdn.microsoft.com/ko-kr/library/dn255005%28v=vs.85%29.aspx
F12 개발자 도구의 프로파일러를 사용하여 웹 페이지에서 JavaScript의 자세한 성능 측정값을 가져올 수 있습니다.
스크립트 프로파일링
프로파일러는 프로파일링 세션 중에 웹 페이지에서 실행하는 JavaScript 함수를 보여 줍니다. 실행 횟수, 각 실행에 소요된 시간, 부모 및 자식 함수 간의 관계 등에 대한 세부 정보가 포함되어 있습니다.
프로파일링을 시작하려면 Internet Explorer 11에서 프로파일링할 페이지를 엽니다. F12 키를 눌러 F12 도구를 열고 프로파일러 도구를 선택합니다.
처음 프로파일러 도구를 열면 그리드가 비어 있습니다. 보고서를 생성하려면 프로파일링 시작 단추를 클릭하거나 F5 키를 누른 다음 프로파일링할 코드를 실행합니다. 세션을 종료하고 보고서를 생성하려면 프로파일링 중지를 클릭하거나 Shift+F5를 누릅니다. 예를 들어 단추를 클릭할 때 수행되는 작업을 프로파일링하려면 프로파일링 시작을 클릭하고 단추를 클릭한 다음 클릭 결과 완료 시 프로파일링 중지를 클릭합니다.
정밀 프로파일링
콘솔 API를 사용하여 코드 내에서 프로파일링을 시작 및 중지할 수도 있습니다. console.profile()
및 console.profileEnd()
메서드는 코드의 정확한 지점에서 프로파일러를 시작 및 중지하는 기능을 제공합니다.
프로파일 보고서 보기
각 프로파일러 세션은 다음 보고서가 덮어쓰지 않는 고유한 보고서를 생성하므로 한 페이지에서 프로파일링 세션을 여러 개 실행할 수 있습니다. 기본적으로 최신 프로파일러 보고서만 표시되며, 현재 보고서 드롭다운 목록을 클릭하면 다른 보고서도 볼 수 있습니다.
보고서는 함수와 호출 트리 뷰의 두 가지 방식으로 볼 수 있습니다. 함수 뷰에는 모든 함수가 단순 목록으로 표시됩니다. 호출 트리 뷰에는 함수 간의 중첩된 부모-자식 관계가 표시됩니다.
프로필 데이터 형식
프로파일러는 사용자 프로필에서 최대 13개의 데이터 열을 반환하며, IE11에서는 웹 작업자가 함수를 실행 중인 시기를 표시하는 새로운 작업자 ID 열이 추가되었습니다. 보고서에서 열의 맨 위를 마우스 오른쪽 단추로 클릭한 다음 열을 추가하거나 제거할 수 있습니다. 위 그림에는 기본 열 선택이 표시됩니다. 다음 그림에서는 모든 열이 표시된 프로파일러를 볼 수 있습니다.
다음 표에서는 프로파일러 도구에서 사용할 수 있는 데이터 범주를 보여 줍니다.
열 제목 | 설명 |
---|---|
기능 | 프로파일링하고 있는 기능의 파일 이름입니다. |
Count | 이 함수가 호출된 총 횟수입니다. |
포괄 시간(ms) | 해당 함수 내에 있는 동안 경과한 실행 시간입니다. 여기에는 해당 함수에서 호출된 자식 또는 외부 함수에서 소요한 시간이 포함됩니다. |
포괄 시간 % | 해당 함수 내에 있는 동안 경과한 실행 시간의 비율입니다. 여기에는 해당 함수에서 호출된 자식 또는 외부 함수에서 소요한 시간이 포함됩니다. |
제외 시간(ms) | 해당 함수 내에 있는 동안 경과한 실행 시간입니다. 여기에는 해당 함수에서 호출된 자식 또는 외부 함수에서 소요한 시간이 제외됩니다. |
제외 시간 % | 해당 함수 내에 있는 동안 경과한 실행 시간의 비율입니다. 여기에는 해당 함수에서 호출된 자식 또는 외부 함수에서 소요한 시간이 제외됩니다. |
평균 시간(ms) | 이 함수와 그 하위 항목 및 외부 함수에서 보낸 평균 시간입니다. |
최대 시간(ms) | 이 함수와 그 하위 항목 및 외부 함수에서 보낸 최대 시간입니다. |
최소 시간(ms) | 이 함수와 그 하위 항목 및 외부 함수에서 보낸 최소 시간입니다. |
함수 유형 | 함수의 유형 - DOM, 사용자, 내장. |
URL | 이 함수가 정의되는 소스 파일의 URL입니다. |
줄 번호 | 소스 코드에서 이 함수가 시작하는 줄 번호입니다. |
작업자 ID | 특정 함수를 실행 중인 웹 작업자를 나타내는 식별자입니다. |
포괄 시간과 전용 시간은 코드의 몇 가지 문제를 나타낼 수 있습니다. 포괄 시간은 함수와 호출된 모든 함수 또는 그 자식이 호출한 모든 함수의 총 시간을 표시합니다. 전용 시간은 해당 특정 함수에서 실제로 소요된 시간만 보여 줍니다. 특정 함수의 포괄 시간은 매우 많지만 전용 시간은 매우 적을 수 있습니다. 예제:
function boringone() { // do some work for 250 milliseconds } function funone() { // do some work for 200 milliseconds and then call boringone() boringone(); } function main() { //do some work for 50 milliseconds then call funone() funone(); }
이 예제에서는 50밀리초 동안 사용되는 "main()" 함수가 호출된 다음 200밀리초가 걸리는 "funone()"을 호출한 다음 250밀리초 동안 사용된 후 완료되는 "boringone()"을 호출합니다. 다음 차트는 포괄 시간과 전용 시간에 표시될 수 있는 값을 보여 줍니다.
함수 | 포괄 시간 | 제외 시간 |
---|---|---|
main() | 500ms | 50ms |
funone() | 450ms | 200ms |
boringone() | 250ms | 250ms |
각 함수의 포괄 시간은 함수 실행 소요 시간에 이 함수를 따르는 함수(자식)의 총 실행 소요 시간을 더한 값입니다. 전용 시간은 현재 함수의 시간만입니다. "boringone()" 함수는 체인의 마지막 함수로, 둘 다에 대해 동일한 시간을 표시합니다.
보고서 검색 및 정렬
함수 검색
프로파일러 도구의 맨 위에 있는 검색 상자를 사용하여 보고서에서 특정 함수를 검색할 수 있습니다. 이 상자는 프로파일링 시작 및 데이터 내보내기 단추와 그룹화되어 있습니다.
검색 상자에 이름의 일부 또는 전부를 입력하고 검색 단추를 클릭하거나 Enter 키를 누릅니다. 모든 키워드 인스턴스가 강조 표시되고 보고서가 첫 번째 항목으로 스크롤됩니다. Enter 또는 F3 키를 눌러 다음 일치 항목으로 이동하고, Shift+Enter 또는 Shift+F3을 눌러 이전 일치 항목으로 이동하여 일치 항목 간에 이동할 수 있습니다.
열을 기준으로 정렬
Excel 스프레드시트 또는 Word 표 정렬과 동일한 방식으로 열을 정렬할 수 있습니다.
호출 트리 보고서 뷰를 정렬하면 최고 수준 함수의 값만 정렬됩니다. 자식 함수는 계층 구조 순서대로 유지됩니다.
보고서 복사 및 저장
.csv 파일(쉼표로 구분된 파일)로 바로 내보내려면 프로파일링 시작 단추 옆에 있는 데이터 내보내기 아이콘을 클릭합니다. 내보내기 함수는 제목을 포함한 모든 행을 저장하고 복사 및 붙여넣기는 제목 없이 선택한 행만 포함합니다.
관련 항목
'개발일지 > JS' 카테고리의 다른 글
[jQuery] Magnific popup conflict with "jquery.nicescroll" (0) | 2015.10.05 |
---|---|
[jQuery] Count-Up Animation 성능 비교 (0) | 2015.10.02 |
[JS] JavaScript Profiling With The Chrome Developer Tools (0) | 2015.10.02 |
[jQuery] Super-smooth CSS transitions & transformations for jQuery (0) | 2015.09.30 |
[jQuery] Count-Up Animation 개발일지 (09.23~10.01) (0) | 2015.09.24 |