프로파일러 도구를 사용하여 코드 성능 분석

이 콘텐츠는 이전 버전의 F12 개발자 도구를 참조합니다.최신 F12 도구 설명서를 참조하세요.

F12 도구는 Windows Internet Explorer 9에서 실행하는 JavaScript 코드의 성능을 분석할 수 있는 기본 제공 스크립트 프로파일러입니다. 이 항목은 이 도구의 기능과, 이 도구를 사용하여 스크립트의 성능을 확인하는 방법에 대해 설명합니다.

스크립트 프로파일링

Internet Explorer 9에서 시작하려면 에서 프로파일할 페이지를 엽니다. Internet Explorer 9에서 F12 키를 눌러서 F12 도구를 연 다음 프로파일러 탭을 클릭하여 시작합니다.

프로파일러에서는 프로파일링을 시작 및 중지할 수 있으며 몇 가지 함수 보기 또는 보고서, 함수를 실행한 횟수 및 각 함수를 실행하는 데 걸린 시간을 알려줍니다.

처음 프로파일러 탭을 클릭하면 표가 비어 있습니다. 프로파일링 시작 단추를 클릭한 다음 브라우저에서 프로파일링된 코드를 실행합니다. 웹 페이지의 초기 로드에서 시작하려면 새로 고침을 클릭하여 페이지에서 코드를 실행합니다. 데이터 수집을 중단하고 결과를 보려면 프로파일링 중지를 클릭합니다. 특정 코드 섹션만 프로파일링하려면 프로파일링 시작을 클릭하고 브라우저에서 해당 섹션(예: 단추를 클릭하여 호출한 함수)만 실행한 다음 프로파일링 중지를 클릭합니다.

프로파일 보고서 보기

프로파일러 도구에서 작성되는 보고서는 프로파일링 중지를 클릭하면 자동으로 생성됩니다. 각 프로파일러 세션은 별도의 보고서이므로 스크립트의 여러 섹션에 대해 프로파일을 몇 번이고 실행하거나 값을 수정하고 동일한 섹션을 다시 프로파일링할 수 있습니다. 기본적으로 최신의 프로파일러 보고서만 표시되지만 현재 보고서 드롭다운 목록을 클릭하면 다른 보고서도 볼 수 있습니다.

보고서는 함수와 호출 트리 뷰의 두 가지 방식으로 볼 수 있습니다. 함수 뷰는 모든 함수를 실행된 순서대로 보여줍니다. 호출 트리 뷰는 함수의 계층 구조를 보여주므로 부모/자식 관계를 더 쉽게 알 수 있습니다.

F12 도구 프로파일 탭의 함수 뷰 스크린샷

프로파일 데이터 유형

프로파일러는 프로파일의 데이터를 열로 최대 12개까지 표시합니다. 보고서에서 열의 상단을 마우스 오른쪽 단추로 클릭하고 열을 추가하거나 제거할 수 있습니다. 다음 표는 사용할 수 있는 데이터를 보여줍니다.

열 제목설명
기능프로파일링하고 있는 기능의 파일 이름입니다.
Count이 함수가 호출된 총 횟수입니다.
포괄 시간(ms)해당 함수 내에 있는 동안 경과한 실행 시간입니다. 여기에는 해당 함수에서 호출된 자식 또는 외부 함수에서 소요한 시간이 포함됩니다.
포괄 시간 %해당 함수 내에 있는 동안 경과한 실행 시간의 비율입니다. 여기에는 해당 함수에서 호출된 자식 또는 외부 함수에서 소요한 시간이 포함됩니다.
제외 시간(ms)해당 함수 내에 있는 동안 경과한 실행 시간입니다. 여기에는 해당 함수에서 호출된 자식 또는 외부 함수에서 소요한 시간이 제외됩니다.
제외 시간 %해당 함수 내에 있는 동안 경과한 실행 시간의 비율입니다. 여기에는 해당 함수에서 호출된 자식 또는 외부 함수에서 소요한 시간이 제외됩니다.
평균 시간(ms)이 함수와 그 하위 항목 및 외부 함수에서 보낸 평균 시간입니다.
최대 시간(ms)이 함수와 그 하위 항목 및 외부 함수에서 보낸 최대 시간입니다.
최소 시간(ms)이 함수와 그 하위 항목 및 외부 함수에서 보낸 최소 시간입니다.
함수 유형함수의 유형 - DOM, 사용자, 내장.
URL이 함수가 정의되는 소스 파일의 URL입니다.
줄 번호소스 코드에서 이 함수가 시작하는 줄 번호입니다.

 

포괄 시간과 전용 시간은 코드에 있는 문제를 나타낼 수 있습니다. 포괄 시간은 함수와 호출된 모든 함수 또는 그 자식이 호출한 모든 함수의 총 시간을 표시합니다. 전용 시간은 해당 특정 함수에서 실제로 소요된 시간만 보여줍니다. 특정 함수의 포괄 시간은 매우 많지만 전용 시간은 매우 적을 수 있습니다. 예제:



function bar() {
// do some work for a 250 milliseconds
}

function foo() {
// do some work for 200 milliseconds and then call bar()
bar();
}

function main() {
//do some work for 50 milliseconds then call foo()
foo();
}


이 예제에서는 50밀리초 동안 사용되는 "main()" 함수가 호출된 다음 200밀리초가 걸리는 "foo()"를 호출한 다음 250밀리초 동안 사용된 후 완료되는 "bar()"를 호출합니다. 다음 차트는 포괄 시간과 전용 시간이 보일 수 있는 값을 보여줍니다.

함수포괄 시간제외 시간
main()500ms50ms
foo()450ms200ms
bar()250ms250ms

 

각 함수의 포괄 시간은 함수 실행 소요 시간에 이 함수를 따르는 함수(자식)의 총 실행 소요 시간을 더한 값입니다. 전용 시간은 현재 함수의 시간만입니다. "bar()" 함수는 체인에서 마지막 함수로서, 둘 다 동일한 시간을 표시합니다.

보고서 검색 및 정렬

도구의 오른쪽 맨 위에 있는 F12 도구 검색 상자로 보고서에서 특정 함수를 검색할 수 있습니다. 이름의 일부 또는 전부를 검색 상자에 입력하고 검색 단추를 클릭하거나 Enter 키를 누릅니다. 모든 키워드 인스턴스가 강조 표시되고 보고서가 첫 번째 항목으로 스크롤됩니다. Enter 키 또는 Shift+Enter를 누르거나 다음 또는 이전 결과 단추를 클릭하여 일치 항목 간에 이동할 수 있습니다.

F12 도구 검색 다음 및 이전 단추의 그림

호출 트리 뷰에서 검색하면 일치하는 함수의 위에 있는 모든 부모 함수가 확장됩니다.

표시된 열의 헤더를 클릭하면 해당 데이터로 정렬됩니다. 제목을 다시 클릭하여 오름차순과 내림차순 간을 전환할 수 있습니다. 프로파일러 탭에서 데이터 영역을 마우스 오른쪽 단추로 클릭하고 정렬 기준을 클릭한 다음 원하는 열을 선택할 수 있습니다.

호출 트리 보고서 뷰를 정렬하면 최고 수준 함수의 값만 정렬됩니다. 자식 함수는 계층 구조 순서대로 유지됩니다.

보고서 복사 및 저장

행을 선택하고 Ctrl+C를 누르거나 마우스 오른쪽 단추를 클릭하고 복사를 클릭하여 프로파일러 보고서의 정보 일부 또는 전부를 복사할 수 있습니다. 모든 행을 선택하려면 Ctrl+A를 누른 다음 Ctrl+C를 누릅니다.

바로 .csv 파일(쉼표로 분리된 파일)로 내보내려면 내보내기 아이콘(프로파일링 시작 단추 옆)을 클릭하세요. 내보내기 함수는 제목을 포함한 모든 행을 저장하고 복사 및 붙여넣기는 제목 없이 선택한 행만 포함합니다.

관련 항목

F12 개발자 도구를 사용하여 웹 페이지를 디버깅하는 방법

 

 

표시:
© 2014 Microsoft