티스토리 뷰

Web 개발/자바스크립트

JavaScript | Observer 시리즈 4탄(완) - PerformanceObserver

최입동 2021. 7. 2. 09:00
320x100

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다.

문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다.

 

Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다.

PerformanceObserver란?

성능 측정 이벤트를 관찰하고 브라우저의 성능 시간 표시 막대에 기록되는 새 성능 항목을 알려줍니다.

(2021-06-30 기준 Editor's Draft 단계로 추후 기능이 변경될 수 있습니다)

구문

  • var performanceObserver = new PerformanceObserver(callback)
  • callback: 관찰되고 있는 성능 이벤트가 발생할 때 호출될 함수.
    • entries: PerformanceObserverEntryList. 관찰된 performance events(PerformanceEntry)의 배열.
    • observer: Observer 자기 자신. 특정 조건이 되면 관찰을 중단하는 등의 용도로 사용 가능.

프로퍼티

supportedEntryTypes: 사용자 에이전트에서 지원하는 성능 매트릭을 나타내는 entryType의 값 리스트(캡처는 Chrome 91.0.4472.114 기준).

  • element: Element Timing API 발생 기록. 큰 이미지 element나 텍스트 노드가 나타날 때 로딩 성능 측정.
  • event: 이벤트 발생 성능 기록.

  • first-input: 사용자의 첫 입력(action) 기록.

  • largest-contentful-paint: 사용자 입력이 있기 전, 가장 큰 이미지 또는 텍스트가 그려지는 성능 기록.

  • layout-shift: 페이지의 element 이동 성능 기록.

  • longtask: 50ms 이상 걸리는 작업의 성능 기록.
  • mark: performance.mark() 호출 기록.

  • measure: performance.measure() 호출 기록.

  • navigation: 브라우저의 document navigation events 기록.

  • paint: first-paint와 first-contentful-paint 기록.
    • first-paint: default background를 이외의 무언가가 처음 그려진 시점.
    • first-contentful-paint: 사용자가 소비할 수 있는 무언가(이미지, 텍스트 등)가 처음 그려진 시점.

  • resource: 리소스를 로드하는 시간과 관련된 정보 기록.

메서드

  • PerformanceObserver.disconnect(): 해당 observer의 모든 성능 관찰을 중단한다.
  • PerformanceObserver.observer(options): 설정한 entry type에 대한 관찰을 시작한다.
  • PerformanceObserver.takeRecords(): 관찰 중인 PerformanceEntry 배열을 반환하고, 해당 배열을 비운다.

지원현황

PerformanceObserver API 지원현황

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="#123" target="_blank" rel="noopener noreferrer">navigation test</a>
  <div>
    <h1>So what happened?</h1>
    <p>
      And remember, don't do anything that affects anything, unless it turns
      out you were supposed to, in which case, for the love of God, don't not
      do it! Ow, my spirit! I don't want to be rescued. You guys aren't Santa!
      You're not even robots. I've got to find a way to escape the horrible
      ravages of youth. Suddenly, I'm going to the bathroom like clockwork,
      every three hours. And those jerks at Social Security stopped sending me
      checks. Now 'I' have to pay 'them'!
    </p>
  </div>
  <!-- 이미지 파일 필요 -->
  <img src="./po.png" alt="no image">
  <script src="./performanceObserver.js"></script>
</body>
</html>
const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => console.log(entry));
});

observer.observe({
  entryTypes: [
    // Element Timing API
    // monitoring the loading performance of large image elements and text nodes as they appear on screen.
    'element',
    // 'event',
    'first-input',
    // largest image or text paint before user input on a web page
    'largest-contentful-paint',
    // movements of the elements on the page
    'layout-shift',
    // tasks that take 50 milliseconds or more
    'longtask',
    // performance.mark()
    'mark',
    // performance.measure()
    'measure',
    // regarding the browser's document navigation events
    'navigation',
    // 'first-paint' or 'first-contentful-paint'
    'paint',
    'resource',
  ],
});

// mark
performance.mark('starting_calculations');
const multiply = 82 * 21;
performance.mark('ending_calculations');

// measure
performance.measure(
  'measure_calculations',
  'starting_calculations',
  'ending_calculations'
);

참고자료

MDN | PerformanceObserver
PerformanceObserver and Paint Timing API

MDN | Long Tasks API

320x100
저작자표시 비영리 동일조건

'Web 개발 > 자바스크립트' 카테고리의 다른 글

Node.js 파일 시스템 관련 npm package 정리  (0) 2022.02.24
JavaScript | 객체 변경 방지  (0) 2021.07.23
JavaScript | Observer 시리즈 3탄 - IntersectionObserver  (0) 2021.06.25
Jest 설정 옵션(Jest Configuring Options)  (0) 2021.06.21
JavaScript | Observer 시리즈 2탄 - ResizeObserver  (0) 2021.06.18
댓글