getPerformance

Get page performance metrics data, including DNS resolution, TCP connection, resource loading, and other performance indicators.

API

getPerformance

Return

Argument	Description	Type
`BasicType \| undefined`	Performance metrics object	`BasicType \| undefined`

BasicType

Property	Description	Type
`dnsSearch`	DNS resolution time (ms)	`number`
`tcpConnect`	TCP connection time (ms)	`number`
`sslConnect`	SSL secure connection time (ms)	`number`
`request`	TTFB network request time (ms)	`number`
`response`	Data transfer time (ms)	`number`
`parseDomTree`	DOM parsing time (ms)	`number`
`resource`	Resource loading time (ms)	`number`
`domReady`	DOM Ready time (ms)	`number`
`httpHead`	HTTP header size (bytes)	`number`
`interactive`	First interactive time (ms)	`number`
`complete`	Page fully loaded time (ms)	`number`
`redirect`	Redirect count	`number`
`redirectTime`	Redirect time (ms)	`number`
`duration`	Total resource request time (ms)	`number`
`fp`	First Paint time (white screen time, ms)	`number \| undefined`
`fcp`	First Contentful Paint time (first screen end time, ms)	`number \| undefined`

Parameters

No parameters

Example

Basic Usage

import { getPerformance } from 'ranuts';

const perf = getPerformance();
if (perf) {
  console.log('DNS resolution time:', perf.dnsSearch, 'ms');
  console.log('TCP connection time:', perf.tcpConnect, 'ms');
  console.log('First screen time:', perf.fcp, 'ms');
}

Performance Monitoring

import { getPerformance } from 'ranuts';

window.addEventListener('load', () => {
  const perf = getPerformance();
  if (perf) {
    // Send performance data to server
    sendToServer({
      dns: perf.dnsSearch,
      tcp: perf.tcpConnect,
      request: perf.request,
      fcp: perf.fcp,
    });
  }
});

Performance Analysis

import { getPerformance } from 'ranuts';

function analyzePerformance() {
  const perf = getPerformance();
  if (!perf) return;

  console.log('=== Performance Analysis ===');
  console.log('DNS resolution:', perf.dnsSearch, 'ms');
  console.log('TCP connection:', perf.tcpConnect, 'ms');
  console.log('SSL handshake:', perf.sslConnect, 'ms');
  console.log('Request response:', perf.request, 'ms');
  console.log('Data transfer:', perf.response, 'ms');
  console.log('DOM parsing:', perf.parseDomTree, 'ms');
  console.log('Resource loading:', perf.resource, 'ms');
  console.log('First Paint:', perf.fp, 'ms');
  console.log('First Contentful Paint:', perf.fcp, 'ms');
}

Notes

Browser support: Requires browser support for Performance API, all modern browsers support it.
Server-side environment: Returns undefined in server-side environments (no window object).
Timing: Recommended to call after page load completes (load event) to get complete performance data.
Data units: All time units are in milliseconds, size units are in bytes.
Use case: Commonly used for performance monitoring, performance analysis, performance optimization, etc.