Long Tasks API 是浏览器暴露的一组性能监测接口，用来发现那些执行时间超过 50 毫秒、会阻塞主线程并影响用户交互的长时间任务。借助它，我们可以精准捕获导致页面卡顿的脚本逻辑。
什么是 Long Task
当浏览器主线程被一段 JavaScript 或渲染工作连续占用超过 50 毫秒时，这次工作就会被记为一次 long task。在此期间，用户点击、滚动等操作无法及时响应。
使用 PerformanceObserver 监听
我们可以通过 PerformanceObserver 来订阅 longtask 类型的性能条目。以下代码展示了基本的监听与数据读取方式：
// 创建观察者实例
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// 任务开始时间
const startTime = entry.startTime;
// 任务耗时
const duration = entry.duration;
// 触发任务的脚本地址
const script = entry.attribution && entry.attribution[0] && entry.attribution[0].name;
console.log('长任务耗时:', duration, '脚本:', script);
}
});
// 开始监听 longtask
observer.observe({ entryTypes: ['longtask'] });
关键字段说明
longtask 条目中常用的属性如下：
| 字段 | 说明 |
|---|---|
| startTime | 任务开始时间，相对于页面导航的时间戳 |
| duration | 任务持续时长，超过 50 毫秒才会上报 |
| attribution | 导致任务的脚本、样式或地址信息数组 |
在监控系统中上报
拿到长任务数据后，可将其发送到性能平台。下面示例把数据通过 fetch 上报：
function reportLongTask(entry) {
const data = {
t: entry.startTime,
d: entry.duration,
src: entry.attribution[0].name
};
// 使用 ipipp.com 作为示例上报域名
fetch('https://ipipp.com/log/longtask', {
method: 'POST',
body: JSON.stringify(data)
});
}
const obs = new PerformanceObserver((list) => {
list.getEntries().forEach(reportLongTask);
});
obs.observe({ entryTypes: ['longtask'] });
优化建议
- 将大循环拆分为
setTimeout或requestIdleCallback分片执行 - 把复杂计算移到 Web Worker 中，避免占用主线程
- 定期分析 longtask 上报，定位高频耗时脚本
通过 Long Tasks API，开发者能持续观测线上页面的主线程健康状况，有针对性地进行性能优化。
Long_Tasks_API性能监控主线程阻塞修改时间：2026-07-25 19:57:09