答案：通过PerformanceObserver结合Long Tasks API可监控执行超50ms的长任务，利用duration、startTime和attribution等数据定位卡顿源头，统计频率与耗时并节流上报，有效优化页面流畅度。
要监控网页中的长任务和卡顿，JavaScript 提供了 PerformanceObserver API，结合 Long Tasks API 可以捕获执行时间超过 50ms 的任务，这些任务通常会导致页面响应变慢或出现卡顿。
启用 PerformanceObserver 监听长任务
通过创建 PerformanceObserver 实例，并指定观察类型为 longtask，可以监听所有触发的长任务。浏览器会在有长任务发生时将记录推送到回调函数中。
示例代码：
if ('PerformanceObserver' in window) {
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.warn('检测到长任务:', {
duration: entry.duration,
name: entry.name,
startTime: entry.startTime,
// 可进一步上报到服务器
});
});
});
// 开始监听 longtask 类型的性能条目
observer.observe({ entryTypes: ['longtask'] });
}
理解 Long Task 数据结构
每个 longtask 条目包含以下关键字段：
立即学习“Java免费学习笔记（深入）”；
- duration：任务持续时间（毫秒），通常大于 50ms
- startTime：任务开始时间（相对于页面加载的高精度时间戳）
- name：任务来源，如 self（当前文档）、iframe、worker 等
- attribution：部分浏览器支持，可定位具体影响的 iframe 或任务源
利用这些信息可以判断是主线程 JS 执行过久，还是第三方脚本、嵌入内容导致阻塞。
结合指标进行性能分析与上报
你可以将长任务数据用于计算关键性能指标，比如：
- 统计单位时间内长任务总次数
- 累计长任务总耗时，评估页面流畅度
- 识别高频长任务来源（如某个 script 资源）
建议在开发环境打印日志，在生产环境中节流上报，避免频繁发送影响性能。例如：
function sendLongTaskMetrics(tasks) {
navigator.sendBeacon('/perf/longtask', JSON.stringify(tasks));
}
// 节流处理，每 30 秒汇总一次
let buffer = [];
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => buffer.push(entry));
setTimeout(() => {
if (buffer.length > 0) {
sendLongTaskMetrics(buffer);
buffer = [];
}
}, 30000);
});
observer.observe({ entryTypes: ['longtask'] });
基本上就这些。只要浏览器支持，PerformanceObserver 配合 longtask 就能有效捕捉导致卡顿的任务，帮助你优化用户体验。 
