PerformanceAPI

PerformanceAPI

 

Performance API는 웹 브라우저에서 애플리케이션의 성능을 측정하고 분석할 수 있도록 도와주는 API입니다. 이 API를 사용하면 페이지 로드 시간, 자원 로딩 시간, 사용자 인터랙션 지연 시간 등을 측정하여 성능 병목 현상을 파악할 수 있습니다.

주요 구성 요소와 사용법

1. Performance 인터페이스
   • performance 객체를 통해 접근할 수 있습니다.
   • performance.now(): 고해상도 타이머로 현재 시간을 밀리초 단위로 반환합니다.
     • 예: const start = performance.now();
   • performance.timeOrigin: 페이지 로드가 시작된 기준 시간(Unix epoch)을 반환합니다.
2. 타이밍 데이터
   • Navigation Timing:
     • 페이지 로드 성능 정보를 제공합니다.
     • performance.getEntriesByType('navigation')를 사용하여 데이터를 확인할 수 있습니다.
     • 주요 속성:
       • domContentLoadedEventEnd: DOMContentLoaded 이벤트가 완료된 시점.
       • loadEventEnd: 페이지 로드가 완료된 시점.
   • Resource Timing:
     • 이미지, 스크립트, CSS와 같은 리소스 로딩 시간을 측정합니다.
     • performance.getEntriesByType('resource')로 리소스 관련 성능 데이터를 얻습니다.
3. Custom Metrics
   • 개발자가 원하는 성능 측정 지점을 직접 정의할 수 있습니다.
   • performance.mark(name):
     • 특정 시점에 마크를 설정합니다.
     • 예: performance.mark('start-task');
   • performance.measure(name, startMark, endMark):
     • 두 마크 사이의 시간을 측정합니다.
     • 예:

       performance.mark('start');
       // 작업 수행
       performance.mark('end');
       performance.measure('taskDuration', 'start', 'end');

4. User Timing API
   • 사용자 정의 마크 및 측정을 제공하는 API입니다.
   • 데이터를 performance.getEntriesByType('measure')로 분석할 수 있습니다.
5. Event Loop Latency
   • Event Timing API를 사용하여 사용자 입력 이벤트와 같은 대기 시간을 측정합니다.
   • performance.getEntriesByType('event')를 통해 관련 정보를 얻을 수 있습니다.
6. LCP, FID, CLS 등 Core Web Vitals 측정
   • Performance Observer를 사용하여 Largest Contentful Paint(LCP), First Input Delay(FID), **Cumulative Layout Shift(CLS)**와 같은 주요 웹 성능 지표를 수집합니다.
   • 예:

     const observer = new PerformanceObserver((list) => {
       for (const entry of list.getEntries()) {
         console.log(entry);
       }
     });
     observer.observe({ type: 'largest-contentful-paint', buffered: true });

7. Memory Usage
   • 일부 브라우저에서 메모리 사용량에 대한 정보를 제공.
   • performance.memory 객체를 통해 확인할 수 있습니다.

사용 예시

// 페이지 로드 시간을 측정하는 코드
window.addEventListener('load', () => {
  const [navigationEntry] = performance.getEntriesByType('navigation');
  console.log(`페이지 로드 시간: ${navigationEntry.loadEventEnd}ms`);
});

// 특정 작업 성능 측정
performance.mark('startWork');
// 작업 코드 실행
setTimeout(() => {
  performance.mark('endWork');
  performance.measure('workDuration', 'startWork', 'endWork');
  const measures = performance.getEntriesByType('measure');
  console.log(measures[0]);
}, 1000);

활용 사례

• 성능 최적화:
  • 페이지 로드 속도 향상.
  • 사용자 인터랙션 지연 분석.
• A/B 테스트:
  • 변경된 UI 요소가 성능에 미치는 영향을 측정.
• 리소스 로딩 최적화:
  • 이미지, CSS, JS 파일의 로딩 시간 확인 및 최적화.

주의점

• 브라우저 호환성을 확인해야 합니다.
• 일부 API는 HTTPS 환경에서만 동작합니다.
• 사용자 데이터에 민감한 작업에서는 사용에 유의해야 합니다.

https://developer.mozilla.org/en-US/docs/Web/API/Performance

Performance - Web APIs | MDN