JavaScript可通过PerformanceObserver监听longtask类型性能条目，捕获≥50ms长任务并上报；需在document.readyState==='loading'阶段注册，仅Chromium内核支持，Chrome122+提供attribution信息辅助定位。
JavaScript 中可通过 PerformanceObserver 监听 longtask 类型的性能条目，捕获执行时间超过 50ms 的长任务（Long Task），并主动记录日志或上报监控系统。
启用 longtask 观察器并捕获超标任务
浏览器将主线程阻塞 ≥50ms 的任务标记为长任务。需在页面早期（如 script 标签内或模块入口）初始化观察器：
- 创建
PerformanceObserver实例，监听"longtask"类型 - 调用
observe({ entryTypes: ["longtask"] })开始收集 - 在回调中遍历
entries，每个 entry 的duration即实际耗时（单位：毫秒） - 可筛选 duration > 50（或按业务设定阈值，如 100ms）的任务进行记录
示例代码：
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
if (entry.duration > 100) { // 超标阈值设为 100ms
console.warn('[Long Task Alert]', {
duration: entry.duration,
startTime: entry.startTime,
attribution: entry.attribution // Chrome 122+ 支持，含触发脚本 URL 和行号
});
// 这里可调用埋点 SDK 上报，如 sendToMonitor({ type: 'longtask', ... })
}
});
});
// 必须在页面加载早期启用，否则可能错过初始长任务
observer.observe({ entryTypes: ['longtask'] });
确保 longtask 数据可用的关键前提
不是所有环境都默认支持或返回完整信息，需注意以下几点：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
-
仅 Chromium 内核（Chrome/Edge/新版 Opera）稳定支持；Firefox 和 Safari 当前不支持
longtask类型 - 需在
document.readyState === 'loading'阶段或更早注册，否则可能漏掉首屏关键长任务 - 若页面启用了
cross-origin-isolated或存在 CSP 限制，部分 attribution 信息可能被截断 - 移动端 WebView（如微信、QQ 浏览器）需确认内核版本 ≥ Chrome 70，低版本可能无此能力
增强日志信息：结合堆栈与上下文
原生 longtask 条目不包含 JS 堆栈，但可通过以下方式补充定位线索：
- 利用
entry.attribution（Chrome 122+）获取触发脚本 URL、行号、列号，直接关联到源码位置 - 在关键业务逻辑入口（如 React useEffect、Vue onMounted、大型计算函数）手动打点，记录开始时间戳，与 longtask 时间窗口比对
- 配合
console.time()/console.timeEnd()对可疑函数做轻量级耗时验证 - 若使用构建工具（如 Webpack/Vite），开启 source map 并保留原始文件名和行号，便于日志归因
生产环境建议：节流上报 + 分级告警
避免日志刷屏或监控服务过载，推荐策略：
- 对同一 URL + 同一 duration 区间（如 100–199ms）的任务做简单去重或计数聚合
- 设置采样率（如 10% 用户开启完整 longtask 上报，其余只上报是否发生）
- 按严重程度分级：>100ms 记录 warn，>500ms 立即触发 error 级上报并通知前端值班
- 将 longtask 日志与页面 visibilityState、网络类型（navigator.connection.effectiveType）、内存压力（performance.memory）等上下文一并发送，辅助归因
