如何监测js长任务

发表于 更新于 分类于 阅读次数： Changyan： 本文字数： 1.4k 阅读时长 ≈ 1 分钟
具体实现 PerformanceLongTaskTiming 长任务的方法是通过 PerformanceObserver API 监听长任务事件，并在事件回调函数中进行相应处理。

具体实现 PerformanceLongTaskTiming 长任务的方法是通过 PerformanceObserver API 监听长任务事件，并在事件回调函数中进行相应处理。

记录长任务的相关信息：

记录长任务的相关信息可以提供更详细的信息，以便后续进一步分析和优化性能。可以记录长任务的名称、开始时间、持续时间、堆栈跟踪等信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name === 'self' && entry.duration > 50) {
      console.warn('Long Task:', entry.startTime, entry.duration);
      // 记录长任务信息
      const taskInfo = {
        name: 'Long Task',
        start: entry.startTime,
        duration: entry.duration,
        stackTrace: entry.attribution[0].stackTrace
      };
      // 存储到日志或发送到服务器
      // ...
    }
  });
});

很遗憾的是，我在自己做测试demo时，以上的API中，entry.attribution[0].stackTrace属性一直是空的，所以无法获取到长任务的堆栈跟踪信息。目前只能通过window.onerror来获取堆栈跟踪信息。

上报异常：

长任务可能会导致页面卡顿或崩溃，需要及时上报异常信息以便快速发现和解决问题。上报异常可以使用 window.onerror 或其他异常监控工具。

1
2
3
4
5
6
7
8
9
10
11
window.onerror = function (msg, url, lineNo, columnNo, error) {
  const errorInfo = {
    message: msg,
    url: url,
    lineNo: lineNo,
    columnNo: columnNo,
    stackTrace: error.stack
  };
  // 存储到日志或发送到服务器
  // ...
};

提醒用户：

当长任务发生时，可以向用户显示相应的提示信息，提醒用户页面出现卡顿，可以进行等待或刷新页面等操作。可以使用 toast 提示，当然 toast 并不是一个原生的提示工具，还需要自己另行实现。

1
2
3
4
5
if (entry.name === 'self' && entry.duration > 50) {
  console.warn('Long Task:', entry.startTime, entry.duration);
  // 提醒用户
  toast('页面出现卡顿，请等待或刷新页面！');
}

结合以上实现，可以更全面地监测和处理页面的长任务，提升用户体验和系统性能。

本文永久链接: https://www.mulianju.com/longtask-monitoring/