浏览器性能监控的简单实现

const performanceData = window.performance.timing;

const loadTime = {
  // DNS查询时间
  dnsLookup: performanceData.domainLookupEnd - performanceData.domainLookupStart,
  
  // TCP连接时间
  tcpConnect: performanceData.connectEnd - performanceData.connectStart,
  
  // 请求响应时间
  requestResponse: performanceData.responseEnd - performanceData.requestStart,
  
  // DOM解析时间
  domParse: performanceData.domComplete - performanceData.domLoading,
  
  // 页面完全加载时间
  pageLoad: performanceData.loadEventEnd - performanceData.navigationStart
};

console.log('页面加载性能数据:', loadTime);

const resources = window.performance.getEntriesByType('resource');

resources.forEach(resource => {
  console.log(`${resource.name} 加载耗时: ${resource.duration}ms`);
});

class PerformanceMonitor {
  constructor() {
    this.metrics = {};
    this.init();
  }

  init() {
    // 确保performance API可用
    if (!window.performance || !window.performance.timing) {
      console.warn('Performance API not supported');
      return;
    }

    this.captureTimingMetrics();
    this.captureResourceMetrics();
    this.capturePaintMetrics();
  }

  captureTimingMetrics() {
    const timing = window.performance.timing;
    
    this.metrics.timing = {
      dns: timing.domainLookupEnd - timing.domainLookupStart,
      tcp: timing.connectEnd - timing.connectStart,
      ttfb: timing.responseStart - timing.requestStart,
      domReady: timing.domComplete - timing.domLoading,
      pageLoad: timing.loadEventEnd - timing.navigationStart
    };
  }

  captureResourceMetrics() {
    const resources = window.performance.getEntriesByType('resource');
    
    this.metrics.resources = resources.map(resource => ({
      name: resource.name,
      type: resource.initiatorType,
      duration: resource.duration,
      size: resource.transferSize
    }));
  }

  capturePaintMetrics() {
    if (window.performance.getEntriesByName) {
      const fp = window.performance.getEntriesByName('first-paint')[0];
      const fcp = window.performance.getEntriesByName('first-contentful-paint')[0];
      
      this.metrics.paint = {
        firstPaint: fp ? fp.startTime : null,
        firstContentfulPaint: fcp ? fcp.startTime : null
      };
    }
  }

  getMetrics() {
    return this.metrics;
  }
}

// 使用示例
document.addEventListener('DOMContentLoaded', () => {
  const monitor = new PerformanceMonitor();
  
  // 确保在页面完全加载后获取完整数据
  window.addEventListener('load', () => {
    console.log('性能指标:', monitor.getMetrics());
    
    // 可以在这里将数据发送到服务器进行分析
    // sendToAnalytics(monitor.getMetrics());
  });
});

function measureInteraction(callback) {
  const start = performance.now();
  
  callback();
  
  const duration = performance.now() - start;
  console.log(`交互耗时: ${duration}ms`);
  return duration;
}

// 使用示例
document.getElementById('myButton').addEventListener('click', () => {
  measureInteraction(() => {
    // 需要测量的交互代码
    for (let i = 0; i < 100000; i++) {
      // 模拟耗时操作
    }
  });
});

if (window.PerformanceObserver) {
  const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach(entry => {
      console.log(`${entry.name} 耗时: ${entry.duration}ms`);
    });
  });
  
  // 观察资源加载性能
  observer.observe({ entryTypes: ['resource'] });
  
  // 观察长任务(主线程阻塞超过50ms的任务)
  observer.observe({ entryTypes: ['longtask'] });
}