performance使用场景

在 JavaScript 中，performance API 是用于测量和分析网页性能的核心工具，它能提供高精度的时间数据和各类性能指标，帮助开发者定位性能瓶颈、优化用户体验。以下是其常见使用场景及具体实现：

一、测量代码执行时间（优化函数/逻辑效率）

场景：分析某段代码（如复杂计算、数据处理）的执行耗时，判断是否存在性能问题。
原理：通过 performance.now() 获取高精度时间戳（毫秒级，精度可达微秒），计算代码执行前后的时间差。

// 测量函数执行时间
function heavyTask() {
  let sum = 0;
  for (let i = 0; i < 10000000; i++) {
    sum += i;
  }
  return sum;
}

// 开始计时
const start = performance.now();
// 执行目标代码
heavyTask();
// 结束计时
const end = performance.now();

// 计算耗时（单位：毫秒）
console.log(`函数执行耗时：${end - start}ms`); 
// 输出示例："函数执行耗时：23.5678ms"

优势：比 Date.now() 精度更高（Date.now() 精度约为 1ms，performance.now() 可达 0.1ms 级），且不受系统时间调整影响。

二、分析页面加载性能（优化首屏/加载速度）

场景：获取页面从请求到渲染完成的各阶段耗时（如 DNS 解析、TCP 连接、DOM 解析等），定位加载瓶颈。
原理：通过 performance.getEntriesByType('navigation') 获取导航性能数据，包含页面加载全流程的时间节点。

// 页面加载完成后分析性能
window.addEventListener('load', () => {
  // 获取导航性能数据
  const navData = performance.getEntriesByType('navigation')[0];
  
  console.log('页面加载各阶段耗时：');
  console.log(`DNS 解析耗时：${navData.domainLookupEnd - navData.domainLookupStart}ms`);
  console.log(`TCP 连接耗时：${navData.connectEnd - navData.connectStart}ms`);
  console.log(`首字节（TTFB）耗时：${navData.responseStart - navData.requestStart}ms`);
  console.log(`DOM 解析耗时：${navData.domInteractive - navData.responseEnd}ms`);
  console.log(`页面完全加载耗时：${navData.loadEventStart - navData.navigationStart}ms`);
});

关键指标：

• TTFB（Time to First Byte）：首字节响应时间，反映服务器处理速度；
• DOM 解析时间：反映 HTML 结构复杂度；
• 加载总时间：评估整体加载效率。

三、监控资源加载性能（优化图片/脚本/样式加载）

场景：分析单个资源（如图片、JS、CSS、接口请求）的加载耗时，找出加载慢的资源。
原理：通过 performance.getEntriesByType('resource') 获取所有资源的加载数据，筛选特定类型资源进行分析。

// 监控所有图片资源的加载时间
window.addEventListener('load', () => {
  const resources = performance.getEntriesByType('resource');
  // 筛选图片资源（png/jpg/jpeg/gif/webp）
  const images = resources.filter(item => 
    item.initiatorType === 'img'
  );
  
  console.log('图片加载性能：');
  images.forEach(img => {
    console.log(`图片 ${img.name} 加载耗时：${img.duration}ms`);
    console.log(`- 从请求到响应：${img.responseEnd - img.requestStart}ms`);
  });
});

应用：

• 发现加载慢的图片，考虑压缩、CDN 加速或懒加载；
• 分析第三方脚本（如广告、统计工具）的加载耗时，评估是否影响主页面。

四、检测长任务（避免主线程阻塞）

场景：识别阻塞主线程的“长任务”（执行时间超过 50ms 的任务，会导致页面卡顿、交互延迟）。
原理：通过 performance.getEntriesByType('longtask') 捕获长任务，分析其来源（如复杂 DOM 操作、大量计算）。

// 监听长任务
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(task => {
    console.log(`检测到长任务，耗时：${task.duration}ms`);
    console.log(`任务来源：${task.name}`); // 可能是脚本路径或"self"（当前页面）
  });
});

// 启动观察器
observer.observe({ entryTypes: ['longtask'] });

优化方向：

• 将长任务拆分为小任务（用 setTimeout 或 requestIdleCallback）；
• 复杂计算移至 Web Worker 执行，避免阻塞主线程。

五、用户交互性能分析（优化点击/输入响应速度）

场景：测量用户操作（如点击按钮、输入文本）到页面响应的时间，确保交互流畅。
原理：在用户事件（如 click）触发时记录开始时间，在响应完成（如 DOM 更新后）记录结束时间，计算差值。

// 测量按钮点击到数据渲染的响应时间
const btn = document.getElementById('submitBtn');
const result = document.getElementById('result');

btn.addEventListener('click', async () => {
  // 记录点击开始时间
  const start = performance.now();
  
  // 模拟数据请求和渲染
  await fetch('/api/data').then(res => res.json());
  result.textContent = '数据加载完成';
  
  // 记录响应完成时间
  const end = performance.now();
  console.log(`点击响应耗时：${end - start}ms`); // 理想值应 < 100ms
});

标准：根据 Web 性能指标，用户交互响应时间应控制在 100ms 内，否则会让用户感到延迟。

六、性能数据上报与监控（长期跟踪性能趋势）

场景：收集真实用户的性能数据（如首屏加载时间、资源加载耗时），上传到服务器进行分析，长期监控产品性能。

// 收集并上报性能数据
function reportPerformance() {
  // 页面加载完成后收集数据
  window.addEventListener('load', () => {
    const navData = performance.getEntriesByType('navigation')[0];
    const resources = performance.getEntriesByType('resource');
    
    // 构建上报数据
    const reportData = {
      pageUrl: window.location.href,
      loadTime: navData.loadEventStart - navData.navigationStart, // 总加载时间
      ttfb: navData.responseStart - navData.requestStart, // 首字节时间
      slowResources: resources
        .filter(r => r.duration > 1000) // 筛选加载超1s的资源
        .map(r => ({ url: r.name, duration: r.duration }))
    };
    
    // 上报到服务器
    fetch('/api/performance', {
      method: 'POST',
      body: JSON.stringify(reportData)
    });
  });
}

// 启动上报
reportPerformance();

价值：通过分析真实用户数据，发现特定设备/网络环境下的性能问题（如低端机加载慢、某地区 CDN 延迟高）。

总结：performance API 的核心价值

• 高精度测量：提供比 Date 更精准的时间数据，适合微性能分析；
• 全链路覆盖：从页面加载、资源加载到代码执行、用户交互，覆盖前端性能的全场景；
• 问题定位：帮助开发者量化性能问题（如“这个函数耗时 200ms”“这张图片加载了 3s”），为优化提供数据依据。

实际开发中，performance 常与 Lighthouse、Web Vitals 等工具配合使用，形成完整的性能监控与优化体系。