PerformanceObserver / PerformancePaintTiming API

[JaeYeopHan]

Catch FCP

💡FCP: First Contentful Painting

브라우저는 일련의 과정을 통해 화면을 렌더링한다. 그리고 그 과정 중에는 paint 과정이 있으며 보통 UX와 관련된 성능 지표로 First Contentful Painting Time을 삼는다. 이 시점을 JavaScript로 잡아낼 수 있을까? 이 시점을 잡아낼 수 있다면 React Application 외부에서 ReactDOM.render가 완료된 시점을 알 수 있지 않을까?

PerformanceObserver

const po = new PerformanceObserver(list =>
  list
    .getEntries()
    .filter(({ entryType }) => entryType === 'paint')
    .map(({ name }) => name === FIRST_CONTENTFUL_PAINT)
    .forEach(/* callback */),
)

try {
  po.observe({ entryTypes: ['measure', 'paint'] })
} catch (e) {
  console.error(e)
  po.disconnect()
}

PerformanceObserver라는 API를 활용하여 브라우저가 그려지는 과정들을 observe할 수 있다. 우리에게 필요한 측정 지표는 paint 시점이다. 그렇기 때문에 observe의 parameter로 { entryTypes: ['paint'] }만 넘겨줘도 된다.

(왜 try-catch로 감싸줬는지는 바로 밑에서👇)

PerformancePaintTiming

⛑ Safari 미지원 API 🤦‍♂️

해당 API는 Chrome에서만 지원하고 Safari에서는 지원하지 않는다. 때문에 entryType에서 paint를 observe할 수 없다. paint를 구독했을 때 반환되는 entry의 interface는 다음과 같다.

interface PerformancePaintTiming {
  name: string; // "first-paint" or "first-contentful-paint"
  entryType: string // "paint"
  duration: number
  startTime: number
}

So What?

ReactDOM.render가 완료된 시점을 잡기 위해 PerformanceObserver API를 사용했지만 safari에서 미지원하므로 터진다. 때문에 safari를 포기하고 try-catch statement로 감싸던가 다른 방법을 찾아야 한다.