如何排查和优化页面中的 Long Task？

UI晶晶提问于 2026-03-06 15:03:22 阅读 4

优化

最近用 Lighthouse 测速，发现有个 120ms 的 Long Task 警告，但不知道具体是哪段代码引起的。我试过在关键函数里加 console.time()，但定位不到源头。

项目里用了大量第三方库，比如 lodash 和一个图表组件，会不会是它们的问题？有没有办法用 Performance 面板精准抓到那个卡顿的函数调用栈？

下面是我简化后的初始化逻辑：

document.addEventListener('DOMContentLoaded', () => {
  initChart(); // 第三方图表库
  const data = _.cloneDeep(largeDataset); // 使用 lodash
  renderList(data);
});

前端优化性能优化渲染优化

我来解答赞 2 收藏

反馈

1 条解答

欢欢~ Lv1

Long Task的问题确实烦人，特别是第三方库的黑盒代码。给你个靠谱的排查方法：

1. 用Chrome Performance面板录制，别用Lighthouse那个笼统的报告。录制时要勾选Screenshots和Web Vitals选项。

2. 重点看Main线程的火焰图，找到超过50ms的黄色长条块（那就是Long Task）。右键可以放大那个区域，会显示完整的调用栈。

3. 针对你的代码，两个嫌疑点：
- initChart()大概率是图表库初始化开销
- _.cloneDeep处理大对象时性能感人

快速优化方案：

// 方案1：推迟非必要操作

document.addEventListener('DOMContentLoaded', () => {

  initChart(); // 保持同步执行

  // 把大数据处理扔到下一个tick

  setTimeout(() => {

    const data = structuredClone(largeDataset); // 用原生API替代lodash

    renderList(data);

  }, 0);

});



// 方案2：更激进的做法，用requestIdleCallback

document.addEventListener('DOMContentLoaded', () => {

  initChart();

  requestIdleCallback(() => {

    const data = structuredClone(largeDataset);

    renderList(data);

  });

});

另外告诉你个骚操作：在Performance面板里按住WASD键可以像游戏一样缩放移动时间轴，比鼠标拖动快多了。排查的时候记得把CPU throttling调到4x或6x，更容易复现问题。

如果发现确实是图表库的问题，可以试试延迟加载或者换更轻量的库。我上次把一个Echarts实例换成Chart.js，Long Task直接少了80ms。

2026-03-06 15:07