// Mark the start of an operation
performance.mark('fetch-start');

await fetch('/api/data');

// Mark the end
performance.mark('fetch-end');

// Measure the duration
performance.measure('data-fetch', 'fetch-start', 'fetch-end');

// Get the measurement
const measures = performance.getEntriesByName('data-fetch');
console.log(`Fetch took ${measures[0].duration}ms`);

async function loadApp() {
  performance.mark('app-start');

  performance.mark('data-start');
  const data = await fetchData();
  performance.mark('data-end');
  performance.measure('data-load', 'data-start', 'data-end');

  performance.mark('render-start');
  renderData(data);
  performance.mark('render-end');
  performance.measure('render-time', 'render-start', 'render-end');

  performance.mark('app-end');
  performance.measure('total-load', 'app-start', 'app-end');

  // Log all measurements
  performance.getEntriesByType('measure').forEach(m => {
    console.log(`${m.name}: ${m.duration.toFixed(2)}ms`);
  });
}

performance.mark('step-1');
// ... do work ...
performance.mark('step-2');
// ... do more work ...
performance.mark('step-3');

performance.measure('phase-1', 'step-1', 'step-2');
performance.measure('phase-2', 'step-2', 'step-3');

// Clear specific marks
performance.clearMarks('fetch-start');

// Clear all marks
performance.clearMarks();

// Clear specific measures
performance.clearMeasures('data-fetch');

// Clear all measures
performance.clearMeasures();

// All marks
const marks = performance.getEntriesByType('mark');

// All measures
const measures = performance.getEntriesByType('measure');

// Named entries
const specific = performance.getEntriesByName('data-fetch');