ran
简体中文

getPerformance

获取页面性能指标数据，包括 DNS 解析、TCP 连接、资源加载等各项性能指标。

API

getPerformance

Return

参数 说明 类型
BasicType | undefined 性能指标对象 BasicType | undefined

BasicType

属性 说明 类型
dnsSearch DNS 解析耗时（毫秒） number
tcpConnect TCP 连接耗时（毫秒） number
sslConnect SSL 安全连接耗时（毫秒） number
request TTFB 网络请求耗时（毫秒） number
response 数据传输耗时（毫秒） number
parseDomTree DOM 解析耗时（毫秒） number
resource 资源加载耗时（毫秒） number
domReady DOM Ready 时间（毫秒） number
httpHead HTTP 头部大小（字节） number
interactive 首次可交互时间（毫秒） number
complete 页面完全加载时间（毫秒） number
redirect 重定向次数 number
redirectTime 重定向耗时（毫秒） number
duration 资源请求总耗时（毫秒） number
fp 首次绘制时间（白屏时间，毫秒） number | undefined
fcp 首次内容绘制时间（首屏结束时间，毫秒） number | undefined

Parameters

无参数

Example

基础用法

import { getPerformance } from 'ranuts';

const perf = getPerformance();
if (perf) {
  console.log('DNS 解析耗时:', perf.dnsSearch, 'ms');
  console.log('TCP 连接耗时:', perf.tcpConnect, 'ms');
  console.log('首屏时间:', perf.fcp, 'ms');
}

性能监控

import { getPerformance } from 'ranuts';

window.addEventListener('load', () => {
  const perf = getPerformance();
  if (perf) {
    // 发送性能数据到服务器
    sendToServer({
      dns: perf.dnsSearch,
      tcp: perf.tcpConnect,
      request: perf.request,
      fcp: perf.fcp,
    });
  }
});

性能分析

import { getPerformance } from 'ranuts';

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

  console.log('=== 性能分析 ===');
  console.log('DNS 解析:', perf.dnsSearch, 'ms');
  console.log('TCP 连接:', perf.tcpConnect, 'ms');
  console.log('SSL 握手:', perf.sslConnect, 'ms');
  console.log('请求响应:', perf.request, 'ms');
  console.log('数据传输:', perf.response, 'ms');
  console.log('DOM 解析:', perf.parseDomTree, 'ms');
  console.log('资源加载:', perf.resource, 'ms');
  console.log('首次绘制:', perf.fp, 'ms');
  console.log('首次内容绘制:', perf.fcp, 'ms');
}

注意事项

  1. 浏览器支持：需要浏览器支持 Performance API，现代浏览器都支持。

  2. 服务端环境：在服务端环境（无 window 对象）时返回 undefined。

  3. 时机：建议在页面加载完成后（load 事件）调用，以获得完整的性能数据。

  4. 数据单位：所有时间单位为毫秒，大小单位为字节。

  5. 用途：常用于性能监控、性能分析、性能优化等场景。