Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

lynx: performance readonly object

This object provides access to performance metrics related to the current page.

Instance Methods

createObserver()

Creates a PerformanceObserver object that will be used to receive performance events generated by Lynx engine.

Syntax

createObserver(callback: PerformanceCallback): PerformanceObserver;

Parameters

callback

A callback function that handles performance events, defined as type PerformanceCallback = (entry: PerformanceEntry) => void. The entry is a subclass of PerformanceEntry.

This callback is triggered when the PerformanceObserver receives a performance event.

Return Value

A PerformanceObserver object.

Examples

The following example creates a PerformanceObserver watching for metric.fcp and pipeline entries.

performance-apisrc/simple_observe/index.tsx
Preview

profileStart()

Marks the start of a trace event.

Syntax

profileStart(name: string, option?: { flowId: number, arg?:  Record<string, string>}): void;

Parameters

name

The name of the trace event.

option(optional)

Additional options such as flowId and custom arguments.

Examples

// Start a trace event with only a name
lynx.performance.profileStart('DataFetch');

// Start a trace event with custom arguments
lynx.performance.profileStart('DataFetch', {
  args: { url: 'https://api.example.com/data', method: 'GET' },
});

// Start a trace event with a flow id
const flowId = lynx.performance.profileFlowId();
lynx.performance.profileStart('UserAction', { flowId });

// Start a duration event with both arguments and flow ID
lynx.performance.profileStart('ComplexProcess', {
  args: { step: 'start' },
  flowId,
});

profileEnd()

Marks the end of the most recent trace event.

Syntax

profileEnd(): void;

Examples

// End the most recent duration event
lynx.performance.profileEnd();

profileMark()

Marks an instant(point-in-time) event.

Syntax

profileMark(name: string, option?: { flowId: number, arg?:  Record<string, string>}): void;

Parameters

name

The name of the instant event.

option(optional)

Additional options such as flowId and custom arguments.

Examples

// Mark an instant event with only a name
lynx.performance.profileMark('FetchStarted');

// Mark an instant event with custom arguments
lynx.performance.profileMark('FetchStarted', {
  args: { status: 'initiated' },
});

// Mark an instant event with a flow id
const flowId = lynx.performance.profileFlowId();
lynx.performance.profileMark('ActionCheckpoint', { flowId });

// Mark an instant event with both arguments and flow id
lynx.performance.profileMark('ProcessMidpoint', {
  args: { step: 'middle' },
  flowId,
});

profileFlowId()

Generates a unique flow id for flow events.

Syntax

profileFlowId(): number;

Return Value

A unique flow id number.

Examples

const flowId = lynx.performance.profileFlowId();
lynx.performance.profileStart('UserAction', { flowId });
lynx.performance.profileMark('ActionCheckpoint', { flowId });
lynx.performance.profileEnd();

isProfileRecording()

Checks if trace recording is currently active.

Syntax

isProfileRecording(): boolean

Return Value

Return true if trace recording is currently active;

Examples

if (lynx.performance.isProfileRecording()) {
  lynx.performance.profileMark('RecordingIsActive');
}

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.