函数耗时情况检测方案

前端函数耗时检测极简指南（3种核心方法）

🔵 1. 快速调试法（控制台）

console.time('func');  // 开始计时
yourFunction();        // 执行目标函数
console.timeEnd('func'); // 结束计时并输出
// 控制台显示：func: 15.42ms

适用场景：开发环境快速定位瓶颈函数

🟢 2. 高精度测量法（Performance API）

const start = performance.now();
yourFunction();
const cost = performance.now() - start;
console.log(`耗时：${cost.toFixed(2)}ms`);

优势：
毫秒级精度（可达微秒）
不受系统时钟影响
支持异步函数测量

🟣 3. 深度分析工具（Chrome DevTools）
打开开发者工具 → Performance 面板
点击录制按钮 🔴 → 执行目标函数
在火焰图中：
查找红色三角标记（长任务）
查看 Bottom-Up 标签获取精确耗时占比

专业功能：
函数调用树可视化
内存占用分析
渲染性能关联检测

📌 关键注意事项

生产环境测量：

// 条件判断避免影响线上性能
if (process.env.NODE_ENV === 'development') {const start = performance.now();yourFunction();logMetric(performance.now() - start);
}

异步函数测量：

const measureAsync = async () => {const start = performance.now();await yourAsyncFunction();return performance.now() - start;
};

避免测量失真：
关闭浏览器扩展程序
禁用缓存（Network面板 → Disable cache）
多次测量取平均值

首选方案：开发环境用 console.time 快速调试，性能优化阶段用 DevTools 火焰图分析。对于需要长期监控的关键函数，推荐接入 Web Vitals 性能监测系统。