代码级性能监控：程序员自己就能搞定的卡顿排查神器

你有没有遇到过这样的情况：用户反馈“页面点不动”“加载慢得像在等泡面”，但 Chrome DevTools 里看 Network 和 FPS 都挺正常？这时候，光看浏览器层面的数据已经不够用了——问题可能藏在某一行 JavaScript 里，或者某个没加防抖的回调函数反复执行，又或者一个 for 循环悄悄吃掉了 300ms 主线程。

什么叫代码级性能监控？

简单说，就是能精确到函数、甚至某一行代码的执行耗时和调用频次。不是“这个页面慢”，而是“calculateUserStats() 函数平均每次执行 412ms，90% 的耗时花在内部的 JSON.parse() 上”。它不像传统 APM 工具那样只告诉你“后端响应 2.3s”，而是直接带你钻进代码缝里找病根。

不用装大工具，浏览器自带就能开干

打开 Chrome，按 F12 → 切到 Performance 标签 → 点左上角圆点开始录制 → 做一遍卡顿操作（比如点开一个弹窗、滚动长列表）→ 停止录制。别急着关，往下拉，找到 Bottom-Up 或 Call Tree 视图，展开堆栈，你会看到类似这样的路径：

anonymous @ main.js:187
  handleScroll @ utils.js:42
    throttleFn @ helpers.js:15
      updatePosition @ render.js:89
        recomputeLayout @ layout.js:203

右边的耗时数字会标出每一层实际占用的 CPU 时间。如果 recomputeLayout 占了 180ms，而它里面调用了三次 getBoundingClientRect()，那基本就定位到症结了。

想长期盯梢？加几行代码就行

在关键函数开头插个计时器，不用第三方库：

function expensiveCalculation(data) {
  const start = performance.now();
  // ……一堆处理逻辑
  const end = performance.now();
  console.log(`expensiveCalculation took ${end - start}ms`);
  return result;
}

更进一步，配合 performance.mark() 和 performance.measure()，还能跨函数打点：

performance.mark('fetch-start');
fetch('/api/user').then(res => {
  performance.mark('fetch-end');
  performance.measure('fetch-duration', 'fetch-start', 'fetch-end');
});

刷新页面后，在控制台输入 performance.getEntriesByType('measure')，立马看到所有标记段的耗时，比手写 console.time() 更清晰、可导出。

真实场景：一个被忽略的 for 循环

某次上线后，用户反馈搜索建议框“输两个字就卡两秒”。查 Network，接口返回只要 80ms；查渲染帧率，也没掉帧。最后在 Performance 录制中发现：触发搜索建议的 onInput 回调里，有个 for (let i = 0; i < list.length; i++) 循环遍历了 5000 条本地数据，每次还调用了 String.includes()。改成 list.filter(item => item.name.includes(query)) 并加个节流，卡顿立刻消失。

小提醒：别为了监控反而拖慢程序

开发阶段放开日志和打点没问题，但上线前记得删掉或用环境变量开关控制。频繁调用 performance.now() 本身也有微小开销，尤其在高频回调里（比如 requestAnimationFrame）。真要线上埋点，优先考虑轻量方案，比如只对耗时超阈值的函数自动上报：if (duration > 100) reportSlowFn(name, duration)。