PerformanceObserver

PerformanceObserver는 성능 이벤트를 관측하는 옵저버 API다. F12를 누르면 나오는 개발자도구의 성능 탭과 연관된다.

TYPESCRIPT
1
2
3
const po = new PerformanceObserver(callback);

po.observer(options);

페이지 성능과 관련된 옵저버라는 특징으로인해, 타 옵저버와 달리 태그를 등록하는 과정이 없다.

options

옵저버 등록 시 options를 전달하여 세부 옵션을 조정할 수 있다. PerformanceObserverInit 타입을 가진다.

관찰 대상 (type)

옵저버가 관찰할 성능 요소를 지정한다. 각 요소는 아래와 같다.

navigation - 페이지 로드와 연관된 성능 지표. 페이지 첫 로드 시의 타이밍 정보 등을 수집할 수 있다.
resource - 페이지에 로드된 리소스와 연관된 성능 지표. 이미지, js, css 등이 대상에 해당된다.
mark - 개발자가 지정한 임의의 타이밍 정보.
measure - 지정한 두 mark 사이의 시간 측정.
paint - 페이지의 렌더링 및 페인트와 관련된 성능 지표. 첫 페이지 페인팅(FP), 최초의 유의미한 페인팅(FMP) 등이 해당한다.
longtask - 50ms 이상의 긴 프로세스 식별
element - DOM 요소 렌더링과 연관된 성능 지표.
frame - 애니메이션 프레임과 련관된 성능 지표. 애니메이션 및 스크롤 성능 분석과 관련된 정보를 제공한다.
event - 이벤트 발생과 연관된 성능 지표.
first-input - 사용자의 액션과 관련된 성능 지표.
largest-contentful-paint - 대용량 요소의 렌더링 성능 지표.
layout-shift - 페이지의 요소 이동 성능 지표.

type은 후술할 entryTypes와 병행하여 사용할 수 없다.

관찰 대상 목록 (entryTypes)

옵저버가 관찰할 성능 요소를 배열로 지정한다. 여러 성능 지표를 측정할 때 용이하다.

기존 성능 항목 포함 여부 (buffered)

기존 성능 지표 포함 여부를 지정하는 옵션이다. 기본적으로 false로 선언되어있다.

callback

콜백 메서드를 통해 성능 관련 지표를 다룰 수 있다. PerformanceObserverCallback 타입을 가진다.

entries

성능 지표 객체 PerformanceObserverEntryList를 반환한다. getEntries, getEntriesByName, getEntriesByType 메서드를 통해 원하는 목록을 뽑아낼 수 있다.

각 요소는 type 혹은 entryTypes에 지정한 요소에 따른 성능 개체다. 측정된 성능 요소에 따라 상이한 객체를 가지고 있다.

observer

PerformanceObserver 객체를 반환해준다. 이를 통해 콜백 메서드 내에서도 PerformanceObserver를 연쇄적으로 다룰 수 있다.

React에서 커스텀 훅으로 간편하게 사용하기

PerformanceObserver를 커스텀 훅을 통해 간편하게 사용해보자.

TYPESCRIPT
1
2
3
4
export function usePerformanceObserver(): void
{
  //
}

위와 같이 usePerformanceObserver 메서드를 정의한다.

useMutationObserver를 사용하기 위해선 아래의 두 요소가 필요하다.

콜백 메서드
옵션

지금까지의 옵저버와 달리 DOM이 필요하지 않다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useEffect } from "react";

export type UsePerformanceObserverCallback = (entry: PerformanceEntry) => void;

/**
 * PerformanceObserver 적용 훅 메서드
 *
 * @param {UsePerformanceObserverCallback} callback: 콜백 메서드
 * @param {PerformanceObserverInit} options: 옵션
 */
export function usePerformanceObserver(
  callback: UsePerformanceObserverCallback,
  options?: PerformanceObserverInit
): void {
  useEffect(() => {
    const po = new PerformanceObserver((entries) => {
      entries.getEntries().forEach(callback);
    });
  }, [callback, options]);
}

PerformanceObserver를 초기화하여 po 변수로 할당한다.

po.observe() 메서드를 통해 태그를 등록할 수 있다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useEffect } from "react";

export type UsePerformanceObserverCallback = (entry: PerformanceEntry) => void;

/**
 * PerformanceObserver 적용 훅 메서드
 *
 * @param {UsePerformanceObserverCallback} callback: 콜백 메서드
 * @param {PerformanceObserverInit} options: 옵션
 */
export function usePerformanceObserver(
  callback: UsePerformanceObserverCallback,
  options?: PerformanceObserverInit
): void {
  useEffect(() => {
    const po = new PerformanceObserver((entries) => {
      entries.getEntries().forEach(callback);
    });

    po.observe(options);
  }, [callback, options]);
}

마지막으로, 컴포넌트가 렌더링 될 때마다 PerformanceObserver의 등록이 중첩되지 않도록, 초기화 코드를 넣어준다.

po.disconnect() 메서드를 통해 PerformanceObserver를 제거할 수 있다.

전체 코드

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { useEffect } from "react";

export type UsePerformanceObserverCallback = (entry: PerformanceEntry) => void;

/**
 * PerformanceObserver 적용 훅 메서드
 *
 * @param {UsePerformanceObserverCallback} callback: 콜백 메서드
 * @param {PerformanceObserverInit} options: 옵션
 */
export function usePerformanceObserver(
  callback: UsePerformanceObserverCallback,
  options?: PerformanceObserverInit
): void {
  useEffect(() => {
    const po = new PerformanceObserver((entries) => {
      entries.getEntries().forEach(callback);
    });

    po.observe(options);

    return () => {
      po.disconnect();
    };
  }, [callback, options]);
}