性能监控

欢迎回到第 10 章的学习。在上一节，我们学习了 React Router 集成。现在我们要学习性能监控，这是前端性能优化的重要基础。

本节将学习：页面加载时间、组件渲染时间、内存使用监控、以及网络性能。

页面加载时间监控

页面加载时间监控的作用是什么？ 追踪页面加载的各个阶段，识别性能瓶颈，优化加载速度。

页面加载阶段包括哪些呢？

第一个：导航开始。 用户开始导航到页面。

第二个：DOM 加载完成。 HTML 文档完全加载和解析完成。

第三个：资源加载完成。 所有资源（图片、样式、脚本）都已加载完成。

第四个：页面可交互。 页面可以响应用户交互。

如何监控页面加载时间？ 使用 Performance API 的

performance.timing

，获取各个阶段的时间戳。

页面加载时间监控代码：

文件路径：

src/utils/performance.js

export function trackPageLoadTime() {
  const timing = performance.timing;
  
  const metrics = {
    'page.navigation_time': timing.loadEventEnd - timing.navigationStart,
    'page.dom_loading_time': timing.domContentLoadedEventEnd - timing.navigationStart,
    'page.load_time': timing.loadEventEnd - timing.navigationStart,
    'page.dns_time': timing.domainLookupEnd - timing.domainLookupStart,
    'page.connection_time': timing.connectEnd - timing.connectStart,
    'page.response_time': timing.responseEnd - timing.requestStart,
  };
  
  return metrics;
}

组件渲染时间监控

组件渲染时间监控的作用是什么？ 追踪 React 组件的渲染性能，识别慢组件，优化组件性能。

如何监控组件渲染时间？ 使用 React 的

useEffect

Hook，在组件渲染前后记录时间戳。

组件渲染时间包括哪些呢？

第一个：首次渲染时间。 组件首次渲染的时间。

第二个：更新渲染时间。 组件更新的渲染时间。

第三个：重渲染次数。 组件重渲染的次数。

第四个：渲染原因。 组件重渲染的原因（props 变化、state 变化等）。

组件渲染时间监控代码：

import { useEffect, useRef } from 'react';
import { trace } from '@opentelemetry/api';

const tracer = trace.getTracer('component-performance');

export function useComponentPerformance(componentName) {
  const renderStartRef = useRef();
  const renderCountRef = useRef(0);
  
  useEffect(() => {
    renderStartRef.current = performance.now();
    renderCountRef.current += 1;
    
    return () => {
      const renderTime = performance.now() - renderStartRef.current;
      
      const span = tracer.startSpan('component.render', {
        attributes: {
          'component.name': componentName,
          'component.render_time': renderTime,
          'component.render_count': renderCountRef.current,
        },
      });
      
      span.end();
    };
  });
}

内存使用监控

内存使用监控的作用是什么？ 追踪应用程序的内存使用情况，识别内存泄漏，优化内存管理。

如何监控内存使用？ 使用 Performance API 的

performance.memory

，获取内存使用信息。

内存指标包括哪些呢？

第一个：已使用内存。 当前使用的内存大小。

第二个：内存限制。 内存使用的限制。

第三个：JS 堆大小。 JavaScript 堆的大小。

第四个：DOM 节点数量。 DOM 节点的数量。

内存使用监控代码：

export function trackMemoryUsage() {
  if (!performance.memory) {
    return null;
  }
  
  const memory = performance.memory;
  
  return {
    'memory.used': memory.usedJSHeapSize,
    'memory.total': memory.totalJSHeapSize,
    'memory.limit': memory.jsHeapSizeLimit,
    'dom.nodes': document.querySelectorAll('*').length,
  };
}

// Regularly monitor memory usage
setInterval(() => {
  const memoryMetrics = trackMemoryUsage();
  if (memoryMetrics) {
    // Send to OpenTelemetry
    const tracer = trace.getTracer('memory-monitor');
    const span = tracer.startSpan('memory.usage', {
      attributes: memoryMetrics,
    });
    span.end();
  }
}, 60000); // Monitored every minute

网络性能监控

网络性能监控的作用是什么？ 追踪网络请求的性能，识别慢请求，优化网络性能。

网络性能指标包括哪些呢？

第一个：请求时间。 HTTP 请求的总时间。

第二个：DNS 查询时间。 DNS 查询的时间。

第三个：连接建立时间。 TCP 连接建立的时间。

第四个：等待响应时间。 等待服务器响应的时间。

第五个：下载时间。 数据下载的时间。

如何监控网络性能？ 使用 Performance API 的

performance.getEntriesByType('resource')

，获取资源加载信息。

网络性能监控代码：

export function trackNetworkPerformance() {
  const resources = performance.getEntriesByType('resource');
  
  resources.forEach(resource => {
    const span = tracer.startSpan('network.request', {
      attributes: {
        'network.url': resource.name,
        'network.dns_time': resource.domainLookupEnd - resource.domainLookupStart,
        'network.connection_time': resource.connectEnd - resource.connectStart,
        'network.request_time': resource.responseStart - resource.requestStart,
        'network.response_time': resource.responseEnd - resource.responseStart,
        'network.total_time': resource.duration,
        'network.size': resource.transferSize,
      },
    });
    
    span.end();
  });
}

// Monitor pages after they finish loading
window.addEventListener('load', () => {
  trackNetworkPerformance();
});

本节小结

在本节中，我们学习了性能监控：

第一个是页面加载时间监控。 追踪页面加载的各个阶段，识别性能瓶颈，优化加载速度。

第二个是组件渲染时间监控。 追踪 React 组件的渲染性能，识别慢组件，优化组件性能。

第三个是内存使用监控。 追踪应用程序的内存使用情况，识别内存泄漏，优化内存管理。

第四个是网络性能监控。 追踪网络请求的性能，识别慢请求，优化网络性能。

性能监控流程： 收集性能指标 → 发送到 OpenTelemetry → 导出到 Collector → 在 Grafana 中可视化 → 设置告警 → 优化性能。

这就是性能监控。通过性能监控，我们可以全面了解前端应用的性能表现。

在下一节，我们将学习完整示例：ShoeHub 前端应用。通过完整示例，整合前面学习的所有知识。