PerformanceObserver监听longtask需早注册于顶部、启用buffered:true捕获历史任务，并主动设阈值（如>30ms）判断卡顿；结合startTime对齐用户行为、requestAnimationFrame验证掉帧，生产环境须节流聚合、降级上报。

在 JS 项目中用 PerformanceObserver 监听长任务（longtask），核心是早注册、设阈值、抓关键字段，不是等它“自动报警”，而是你主动判断“多长算卡”。

必须在页面最开头注册，否则会漏掉首屏关键长任务

长任务可能在脚本解析阶段就已发生。如果 observer 在 后或 DOMContentLoaded 之后才注册，那些早期阻塞主线程的任务就捕获不到。

• 把监听代码放在 最顶部的 <script></script> 中
• 启用 buffered: true，可读取注册前已生成的 longtask 条目
• 加上兼容性检查，避免不支持时报错中断：

<script><br>if ('PerformanceObserver' in window && 'longtask' in PerformanceObserver.supportedEntryTypes) {<br> const observer = new PerformanceObserver((list) => { /* 处理逻辑 */ });<br> observer.observe({ entryTypes: ['longtask'], buffered: true });<br>}<br></script>

按业务需求设阈值，别只盯 50ms

浏览器将 ≥50ms 的任务标记为 longtask，但实际体验中，30ms 就可能影响 60fps 渲染帧。是否超标，由你定义。

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

• 开发环境可用 duration > 30 快速暴露问题
• 生产环境可分级：30–50ms 记录采样，≥100ms 立即上报
• 避免只做 console.warn，应结合上下文做轻量归因，例如：

list.getEntries().forEach(entry => {
  if (entry.duration > 30) {
    const context = entry.attribution || 'main'; // Chrome 支持 attribution
    console.info(`[LongTask] ${entry.duration}ms, from ${context}`);
  }
});

用 startTime 对齐用户行为，定位真实卡点

单看 duration 只知道“有多卡”，结合 startTime 才能知道“什么时候卡、为什么卡”。

• 在用户点击、滚动、输入前打一个 performance.mark('user-action')
• 在 longtask 的 startTime 附近查找最近的 mark，判断是否由该操作触发
• 配合 requestAnimationFrame 检查是否真掉帧：若某次 rAF 延迟 ≥16.7ms，且时间窗口与 longtask 重叠，基本可确认因果关系

生产环境要节流、降级、控体积

监控本身不能成为性能负担。

• 避免每条都上报：按时间桶聚合（如每 500ms 内所有 longtask 合并为一条统计）
• 低端设备或弱网下关闭 attribution、只报 duration > 100ms 的严重项
• 用 navigator.sendBeacon 异步发送，不阻塞卸载或导航
• 单次上报 payload 控制在 1.5KB 内，避免被截断或失败