Performance Observer — ichigo.js Examples

Example 1 · Performance Marks & Measures

Use Case: Monitor performance marks and measures using the 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

No entries yet — click a button above to record one.

// Performance observer with the v-performance directive
<div v-performance="onPerformance">
  <button @click="createMark">Create Mark</button>
</div>

methods: {
  onPerformance(entries, observer, options, $ctx) {
    entries.getEntries().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 the :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">...</div>

data() {
  return { measureOptions: { entryTypes: ['measure'] } };
},
methods: {
  onMeasurePerformance(entries, observer, options, $ctx) {
    entries.getEntries().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: the observer is disconnected during the destroy phase
Multiple Entry Types: observe marks, measures, navigation, resource timing, and more

// Handler signature
onPerformance(entries, observer, options, $ctx) {
  // 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 / $ctx.vnode / $ctx.userData
}

// 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
}