PerformanceEntry

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017년 9월.

See full compatibility
Learn more

참고 : 이 기능은 Web Worker에서 사용할 수 있습니다.

PerformanceEntry 객체는 브라우저의 성능 타임라인을 구성하는 하나의 성능 지표를 캡슐화합니다.

Performance API는 PerformanceEntry를 특수화한 하위 클래스 형태로 내장 지표를 제공합니다. 여기에는 리소스 로딩, 이벤트 타이밍 등에 대한 항목이 포함됩니다.

또한 애플리케이션의 특정 지점에서 Performance.mark()나 Performance.measure() 메서드를 호출하여 성능 항목을 직접 생성할 수도 있습니다. 이를 통해 여러분만의 지표를 성능 타임라인에 추가할 수 있습니다.

PerformanceEntry 인스턴스는 항상 다음 하위 클래스 중 하나에 속합니다.

인스턴스 속성

PerformanceEntry.name 읽기 전용: 성능 항목의 이름을 나타내는 문자열입니다. 값은 하위 유형에 따라 다릅니다.
PerformanceEntry.entryType 읽기 전용: 성능 지표의 종류를 나타내는 문자열입니다. 예를 들어 PerformanceMark인 경우 "mark"가 됩니다.
PerformanceEntry.startTime 읽기 전용: 성능 지표의 시작 시간을 나타내는 DOMHighResTimeStamp입니다.
PerformanceEntry.duration 읽기 전용: 성능 항목의 지속 시간을 나타내는 DOMHighResTimeStamp입니다.

인스턴스 메서드

PerformanceEntry.toJSON(): PerformanceEntry 객체의 JSON 표현을 반환합니다.

다음 예제는 PerformanceMark와 PerformanceMeasure 유형의 PerformanceEntry 객체를 생성합니다. PerformanceMark와 PerformanceMeasure 하위 클래스는 PerformanceEntry로부터 duration, entryType, name, startTime 속성을 상속받아, 각 하위 클래스에 맞는 값으로 설정합니다.

// 로그인이 시작되는 코드 위치에 배치
performance.mark("login-started");

// 로그인이 완료되는 코드 위치에 배치
performance.mark("login-finished");

// 로그인 소요 시간 측정
performance.measure("login-duration", "login-started", "login-finished");

function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });