⚡ Performance Observer

Monitor performance metrics with v-performance directive

Example 1: Performance Marks & Measures

Use Case: Monitor performance marks and measures using PerformanceObserver API.

Hint: Click the buttons to create performance marks and measures!

Total Entries: {{ totalEntries }}
Marks: {{ marksCount }}
Measures: {{ measuresCount }}
{{ entry.name }} ({{ entry.entryType }})
Duration: {{ entry.duration.toFixed(2) }}ms | Start Time (since page load): {{ entry.startTime.toFixed(2) }}ms 
// Performance observer with v-performance directive
<div v-performance="onPerformance">
  <button @click="createMark">Create Mark</button>
</div>

methods: {
  onPerformance(entries, observer, options, $ctx) {
    const entryList = entries.getEntries();

    entryList.forEach(entry => {
      console.log(`${entry.name}: ${entry.duration}ms`);
    });

    // Access dropped entries count if available
    if (options?.droppedEntriesCount) {
      console.log(`Dropped: ${options.droppedEntriesCount}`);
    }
  },

  createMark() {
    performance.mark(`mark-${Date.now()}`);
  }
}

Example 2: Custom Entry Types

Use Case: Configure PerformanceObserver with custom options using :options.performance attribute.

Hint: This example only observes 'measure' entries!

Entry Types: {{ measureOptions.entryTypes.join(', ') }}
Measures Observed: {{ measuresOnlyCount }} 
// Custom entry types with :options.performance
<div
  v-performance="onMeasurePerformance"
  :options.performance="measureOptions">
  Observing only measures
</div>

data: {
  measureOptions: {
    entryTypes: ['measure']
  }
},
methods: {
  onMeasurePerformance(entries, observer, options, $ctx) {
    const measures = entries.getEntries();
    measures.forEach(measure => {
      console.log(`Measure: ${measure.name}`);
    });
  }
}

Key Features

  • PerformanceObserver API: Native browser API for monitoring performance metrics
  • Custom Options: Configure entry types via :options.performance or :options
  • Context Parameter: Access element, VNode, and userData via $ctx
  • Automatic Cleanup: Observer is disconnected during the destroy phase
  • Multiple Entry Types: Observe marks, measures, navigation, resource timing, and more
// Handler signature
onPerformance(entries: PerformanceObserverEntryList,
              observer: PerformanceObserver,
              options: { droppedEntriesCount?: number },
              $ctx: LifecycleContext) {
  // entries.getEntries() - array of performance entries
  // entries.getEntriesByType(type) - filter by type
  // entries.getEntriesByName(name) - filter by name
  // options?.droppedEntriesCount - number of dropped entries
  // $ctx.element - DOM element
  // $ctx.vnode - VNode instance
  // $ctx.userData - Proxy-free storage
}

// Options format (PerformanceObserverInit)
{
  entryTypes: ['mark', 'measure'], // array of entry types to observe
  type: 'navigation',              // single entry type (alternative to entryTypes)
  buffered: true                   // include buffered entries
}
← Back to Examples