Chrome性能面板里怎么准确找到JS执行的瓶颈？

皇甫爱景提问于 2026-03-23 12:12:21 阅读 3

工具

我在用 Chrome DevTools 的 Performance 面板分析页面卡顿，录制后看到 Main 里一堆黄色的 Task，但点进去全是框架代码，比如 React 或 webpack 的调用栈，根本找不到我自己写的函数在哪耗时。

我试过加 console.time() 手动打点，但和 Performance 时间线对不上。有没有办法让 DevTools 把我自己的 JS 函数名清晰标出来？或者是我打包配置的问题？

function heavyCalc() {
  let sum = 0;
  for (let i = 0; i < 1e7; i++) sum += i;
  return sum;
}
document.getElementById('btn').addEventListener('click', heavyCalc);

我来解答赞 0 收藏

反馈

1 条解答

庆玲 Dev Lv1

直接这样，在 Chrome DevTools 的 Performance 面板里，录制时勾选 Record JavaScript CPU Profile。然后在生成的报告中，点击 Bottom-Up 或 Heavy (Bottom-Up) 标签页，可以更清晰地看到自己代码的函数调用及其耗时。

2026-03-23 12:15