前端性能监控长任务统计

在前端性能监控中，统计长任务（Long Tasks）的时间和执行次数是非常重要的，因为长任务会导致主线程阻塞，影响页面的响应性和用户体验。长任务通常是指执行时间超过50毫秒的任务。

1. 使用 PerformanceObserver API

PerformanceObserver 是用于监控性能条目的API，可以用来监听长任务。以下是如何使用 PerformanceObserver 来统计长任务时间和执行次数的示例代码：

let longTaskCount = 0;
let totalLongTaskDuration = 0;

const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach(entry => {
        if (entry.entryType === 'longtask') {
            longTaskCount++;
            totalLongTaskDuration += entry.duration;

            console.log(`Long Task Detected:`, entry);
            console.log(`Duration: ${entry.duration}ms`);
            console.log(`Start Time: ${entry.startTime}ms`);
            console.log(`Attribution:`, entry.attribution);
        }
    });

    console.log(`Total Long Tasks: ${longTaskCount}`);
    console.log(`Total Long Task Duration: ${totalLongTaskDuration}ms`);
});

// 开始观察长任务
observer.observe({ entryTypes: ['longtask'] });

2. 解释代码

• PerformanceObserver: 用于监听性能条目。我们指定监听 longtask 类型的条目。
• entry.duration: 表示长任务的持续时间（以毫秒为单位）。
• entry.startTime: 表示长任务的开始时间（相对于页面加载的时间）。
• entry.attribution: 提供了关于长任务的更多信息，比如是哪个脚本或任务导致了长任务。

3. 统计长任务时间和执行次数

• longTaskCount: 用于统计长任务的执行次数。
• totalLongTaskDuration: 用于累计所有长任务的总持续时间。

4. 注意事项

• 兼容性: PerformanceObserver 和 longtask 条目在现代浏览器中支持良好，但在一些旧版浏览器中可能不支持。
• 性能开销: 虽然 PerformanceObserver 的性能开销相对较小，但在高频率的长任务监控中仍需注意性能影响。

5. 进一步优化

• 阈值调整: 如果你希望调整长任务的阈值（默认是50ms），可以通过自定义逻辑来实现。
• 上报数据: 可以将统计到的长任务数据上报到监控系统，以便进一步分析和优化。

通过这种方式，你可以有效地监控和统计页面中的长任务，从而优化前端性能，提升用户体验。