在前端项目开发中，代码执行效率直接关系用户的使用体验，当页面出现卡顿、加载缓慢等问题时，需要快速定位性能瓶颈，掌握js如何检测代码性能是开发者的必备技能。下面介绍5种常用的代码性能监控实现方式，覆盖不同场景下的检测需求。
一、使用performance API进行基础性能检测
performance是浏览器原生提供的性能检测API，无需额外引入依赖，适合检测单段代码的执行耗时。核心通过performance.now()获取高精度时间戳，计算时间差得到执行时长。
// 检测循环代码执行性能
function testLoopPerformance() {
const startTime = performance.now(); // 记录开始时间
let sum = 0;
for (let i = 0; i < 1000000; i++) {
sum += i;
}
const endTime = performance.now(); // 记录结束时间
console.log(`循环执行耗时：${endTime - startTime} 毫秒`);
}
testLoopPerformance();
二、使用console.time和console.timeEnd组合检测
console对象自带的time和timeEnd方法是最简单的性能检测方式，适合快速调试时使用，不需要手动计算时间差，浏览器会自动输出耗时结果。
// 检测函数执行性能
function heavyCompute() {
console.time('heavyCompute'); // 开始计时，参数为计时标识
let result = 0;
for (let i = 0; i < 2000000; i++) {
result += Math.sqrt(i);
}
console.timeEnd('heavyCompute'); // 结束计时，输出对应标识的耗时
return result;
}
heavyCompute();
三、使用PerformanceObserver监听性能条目
PerformanceObserver可以异步监听性能条目变化，适合监控页面加载、资源请求、长任务等场景的性能数据，能够捕获到performance API无法直接获取的隐式性能指标。
// 监听长任务性能条目
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
entries.forEach(entry => {
console.log(`长任务耗时：${entry.duration} 毫秒，开始时间：${entry.startTime}`);
});
});
// 监听长任务类型的性能条目
observer.observe({ entryTypes: ['longtask'] });
// 触发一个长任务用于测试
setTimeout(() => {
const start = performance.now();
while (performance.now() - start < 100) {} // 执行超过100毫秒的任务
}, 1000);
四、自定义性能统计函数封装
如果需要在多个地方复用性能检测逻辑，可以封装自定义的性能统计函数，支持添加额外标识、上报数据等功能，适配项目的定制化监控需求。
// 封装自定义性能检测函数
function measurePerformance(fn, label) {
const start = performance.now();
const result = fn(); // 执行待检测的函数
const end = performance.now();
const cost = end - start;
console.log(`[${label}] 执行耗时：${cost.toFixed(2)} 毫秒`);
// 可以在这里添加数据上报逻辑
return { result, cost };
}
// 使用封装函数检测性能
const computeResult = measurePerformance(() => {
let total = 0;
for (let i = 0; i < 500000; i++) {
total += i * 2;
}
return total;
}, '数值计算任务');
console.log('计算结果：', computeResult.result);
五、集成第三方性能监控工具
对于中大型项目，手动检测所有场景的性能成本较高，可以集成成熟的第三方性能监控工具，比如web-vitals，能够快速获取核心 Web 指标，无需手动处理复杂的性能条目解析。
// 引入web-vitals库后使用，这里展示核心逻辑
import { getCLS, getFID, getLCP } from 'web-vitals';
// 获取核心Web指标并打印
getCLS((metric) => console.log('CLS指标：', metric.value));
getFID((metric) => console.log('FID指标：', metric.value));
getLCP((metric) => console.log('LCP指标：', metric.value));
不同方式的选择建议
如果是快速调试单段代码，优先选择console.time组合或者performance.now()；如果需要监控页面全局性能指标，使用PerformanceObserver更合适；项目需要统一性能监控体系时，可以封装自定义函数或者集成第三方工具。根据实际场景灵活选择，才能更高效地完成js代码性能检测工作。
jsperformance_APIperformance_observerconsole_time代码性能监控修改时间：2026-07-01 17:33:33