Web API, PerformanceObserver

PerformanceObserver가 무엇인가요?

성능 측정 이벤트를 관찰하고 브라우저의 성능 타임라인에 기록되는 성능 항목에 대한 알림을 받는 데 사용

Long Task 에 대한 Observer 예시

왜 필요한가?

현대 웹에서는 사용자 경험을 향상시키기 위해 웹 성능 측정이 중요해졌습니다.
기존에는 performance.getEntries*() 메서드들을 호출하여 이미 수집된 성능 데이터를 한꺼번에 가져오는 방식으로 성능을 분석했습니다.
그러나 이런 방식은 새로운 성능 이벤트를 실시간으로 감지하기 어렵고, 타이밍을 놓치면 데이터를 놓칠 수 있다는 한계가 있습니다.

예를 들어 페이지 로드 중간중간 발생하는 이벤트를 잡아내려면 지속적으로 폴링(polling)해야 했습니다.

• 필요할 때마다 성능 정보를 콜백 함수로 즉시 전달받을 수 있으므로, 실시간 모니터링과 자동화된 성능 로깅에 유용
• 페이지 초기 로드 성능, 사용자 상호작용 지연(FID), Long Task 발생 모니터링 등 개발자가 관심 있는 성능 이벤트를 놓치지 않고 포착하여 바로 대응하거나 기록

⇒ PerformanceObserver는 성능 데이터를 능동적으로 수집하고자 할 때 꼭 필요한 도구

---

기본용법

PerformanceObserver를 사용하려면 먼저 새로운 옵저버 인스턴스를 생성
생성자는 콜백 함수를 인자로 받으며, 이 콜백은 관찰 대상 성능 엔트리가 발생할 때마다 호출

// INFO: obs: 자기 자신(옵저버 객체)
const observer = new PerformanceObserver((list, obs) => {
  const entries = list.getEntries();  // INFO: 성능 엔트리 목록 가져오기
  entries.forEach(entry => {
    console.log(entry.entryType, entry.startTime, entry.duration);
  });
});

// INFO: 관찰 시작, longtask 타입
observer.observe({ entryTypes: ['longtask'], **buffered: true** });

// INFO: 관찰 해제
observer.disconnect();

---

버퍼(buffer)

브라우저 내부에는 생성된 성능 이벤트(PerformanceEntry)를 일시적으로 저장해 두는 구조

버퍼(buffer)의 역할

브라우저는 메인 스레드에서 발생하는 다양한 퍼포먼스 이벤트(예: longtask, paint, resource 등)를 PerformanceEntry 객체로 만들어 내부적으로 저장(버퍼링)

PerformanceObserver를 통해 관찰(observe())하면, 새로운 성능항목(PerformaceEntry)가 생길 때마다(혹은 일정 시점에 일괄(batch)로) 콜백으로 전달됨.

그런데 페이지 로드가 시작되기 전에 오래 걸린 렌더링(또는 Long Task)이 있었다면, 단순히 등록 시점 이후 이벤트만 수신하는 관찰자로는 그 이전 데이터를 놓칠 수 있습니다.

이때 buffered: true 옵션을 지정하면, 브라우저가 내부 버퍼에 과거(등록 이전)에 기록되어 남아 있는 해당 타입의 PerformanceEntry들을 최초 콜백 때 한꺼번에 전달

observer.observe({ type: 'longtask', buffered: true });

버퍼의 동작 방식

1. 엔트리 생성 시 브라우저가 임시로 보관
   • 메인 스레드에서 특정 퍼포먼스 이벤트가 발생하면, 브라우저가 PerformanceEntry 객체를 생성 후 내부 버퍼에 보관
     • 모든 타입이 무제한 버퍼에 저장되는 것은 아니며, 브라우저마다 최대 보존 개수나 시간 등이 있음
2. observe() 시점
   • PerformanceObserver.observe({ type: 'X', buffered: true })를 호출하면, 브라우저는 지금까지 버퍼에 모여 있는 'X' 타입 엔트리들을 한 번에 전달
   • 이후 새로 발생하는 엔트리 역시 일정 시점에 batch(배치) 형태로 콜백에 전달
3. 버퍼에서 제거
   • 한 번 전달된 엔트리는 버퍼에서 제거되어, 같은 Observer 또는 takeRecords()로 중복 전달되지 않음

---

참고자료

PerformanceEntry - Web APIs | MDN