Recipe 15.6

Listening for Performance Entries

This example demonstrates the PerformanceObserver which can notify you of new performance entries. Click the button to make an API request, and the PerformanceObserver will report the new request and how long it took.

Demo

    Code

    JavaScript
    const resultList = document.querySelector('#results');
    const requestButton = document.querySelector('#request-button');
    
    requestButton.addEventListener('click', async () => {
      requestButton.disabled = true;
      requestButton.textContent = 'Loading...';
      await fetch('https://httpbin.org/get');
      requestButton.disabled = false;
      requestButton.textContent = 'Make API Request';
    });
    
    const observer = new PerformanceObserver(entries => {
      for (let entry of entries.getEntries()) {
        if (entry.initiatorType === 'fetch' && entry.name !== 'https://httpbin.org/get2') {
          const item = document.createElement('li');
          item.className = 'list-group-item';
          item.textContent = `API request to ${entry.name} took ${Math.round(entry.responseEnd - entry.startTime)}ms.`
    
          resultList.insertBefore(item, resultList.firstChild);
          fetch('https://httpbin.org/get2');
        }
      }
    });
    
    observer.observe({ type: 'resource' });
    
    HTML
    <button id="request-button" class="btn btn-primary">Make API Request</button>
    
    <ul class="list-group my-4" id="results"></ul>
    Web API Cookbook
    Joe Attardi