PerformanceProfiler

PerformanceProfiler 是一个用于前端应用的轻量级性能监控与压力测试工具。

它不仅能够收集常规的性能指标（路由切换、网络请求耗时），还具备独特的系统老化模拟 (System Aging Simulation) 功能，能够模拟应用在长时间运行（如 4小时、8小时、12小时）后可能出现的性能衰退现象。

⚠️ 重要警告

在将 enableMonitoring 设置为 true 之前，请务必了解以下潜在影响：

1. 主动性能降级：本工具的核心功能之一是老化模拟。当系统运行时间超过阈值（默认 4 小时）后，工具会强制执行高强度的 CPU 计算任务，以模拟设备性能衰退。这会导致主线程阻塞和页面明显卡顿。
2. 生产环境风险：严禁在生产环境中开启老化模拟功能。如果在生产环境使用，请务必将 deepTrackingThreshold 设置为一个极大值，或者确保 enableMonitoring 仅在特定调试会话中开启。
3. 资源消耗：开启监控后，工具会拦截网络请求和路由跳转，并持续在内存中累积指标数据。虽然设有上限，但仍会增加应用的内存和 CPU 基础开销。

建议：仅在性能测试或QA 验收阶段开启此工具的完整功能。

📥 安装

该工具为单文件模块，无需复杂的 npm 安装。

1. 将 performanceProfiler.ts 文件复制到你的项目中（例如 src/utils/ 目录）。
2. 确保你的项目支持 TypeScript。

🚀 快速开始

在你的应用入口文件（如 main.ts 或 App.vue）中初始化：

import PerformanceProfiler from './utils/performanceProfiler';

// 初始化分析器
PerformanceProfiler.init();

🛠️ 核心功能与使用

1. 路由性能监控

在路由守卫中调用 trackRoute，可记录路由切换性能并触发页面指纹分析。

// 以 Vue Router 为例
router.afterEach((to) => {
  PerformanceProfiler.trackRoute({
    path: to.path,
    params: to.params,
    query: to.query,
    meta: to.meta
  });
});

2. 网络请求监控

通过拦截器（Interceptors）集成到 Axios 或 Fetch 中，监控请求耗时和响应大小。

// 请求拦截器
axios.interceptors.request.use(config => {
  // 开启追踪，返回请求ID
  const requestId = PerformanceProfiler.trackRequest(config);
  // 将 ID 附加到 config 中以便响应时使用
  (config as any).metadata = { requestId };
  return config;
});

// 响应拦截器
axios.interceptors.response.use(response => {
  const { requestId } = (response.config as any).metadata || {};
  // 结束追踪
  PerformanceProfiler.trackResponse(response, requestId);
  return response;
});

3. 错误快照捕获

当发生错误时，记录详细的上下文环境（包括 LocalStorage、URL、UserAgent 等），便于复现。

try {
  // 你的业务代码
} catch (error) {
  PerformanceProfiler.logError(error, {
    module: 'UserDashboard',
    action: 'fetchData'
  });
}

4. ⚠️ 压力测试与老化模拟 (Advanced)

这是本工具最强大的功能。它可以模拟应用在长期运行后，因内存碎片、资源未释放等原因导致的性能下降。

开启方法： 通过 configure 方法将阈值 (deepTrackingThreshold) 设为 0，并提高强度 (trackingIntensity)。

/**
 * 开启 "12小时老化" 模式
 * 模拟应用已经连续运行了 12 小时以上
 */
function enableStressTest() {
  const hours = 12;
  // 强度计算公式示例：基础值 1000 * 1.5^(n-4)
  const intensity = 1000 * Math.pow(1.5, hours - 4);

  PerformanceProfiler.configure({
    // 将触发深度追踪的时间阈值设为 0（立即生效）
    deepTrackingThreshold: 0,
    // 将维护任务触发阈值设为 0
    maintenanceThreshold: 0,
    // 设置计算强度
    trackingIntensity: Math.floor(intensity)
  });

  console.warn('⚠️ 已开启压力测试模式，系统响应可能会变慢！');
}

效果： 开启后，PerformanceProfiler 会在以下时机注入额外的 CPU 计算负载（模拟主线程阻塞）：

• 路由切换时：执行复杂的指纹计算。
• 接收网络响应时：以 50% 的概率触发深度数据分析，阻塞主线程数十至数百毫秒。

⚙️ 配置选项

可通过 PerformanceProfiler.configure(options) 修改默认配置：

选项	类型	默认值	说明
enableMonitoring	boolean	false	全局开关
maxCacheSize	number	5000	性能指标缓存队列最大长度
deepTrackingThreshold	number	14400 (4小时)	触发"老化"逻辑的运行时间阈值(秒)
trackingIntensity	number	1000	CPU 负载强度系数
reportInterval	number	300000 (5分钟)	自动上报的时间间隔
reportUrl	string	'/api/...'	上报接口地址

📊 数据上报

你可以设置自定义的上报函数，将数据发送到你的监控平台：

PerformanceProfiler.setReporter(async (data) => {
  // data 包含: timestamp, metricsCount, errorCount, uptime 等
  console.log('Performance Report:', data);
  // await api.uploadLogs(data);
});

📄 License

MIT