如何使用 PerformanceObserver 监测交互到下次渲染-INP指标及排查UI延迟问题

通过PerformanceObserver坚控INP指标需要多维度技术组合，包括事件、数据聚合和性能分析，以下将详细解析具体实施策略。

必须启用 Event Timing API 并 event 类型

获取INP数据需依赖Event Timing API，浏览器仅通过type: 'event'的PerformanceEventTiming条目提供交互耗时信息。建议在页面加载初期（如

内同步脚本）完成observer注册，并启用buffered: true配置，确保能够捕获所有用户交互行为：

1. 执行performance.setResourceTimingBufferSize(200)扩大缓冲区容量
2. 通过'PerformanceEventTiming' in window检测API支持情况
3. 注意entry.duration包含输入延迟、处理延迟和呈现延迟的全过程耗时

理解 duration 值的实际含义

entry.duration作为综合性能指标，虽不展示细分阶段，但能直观反映响应效率：

1. 数值低于1ms通常无需关注，表明未影响主线程
2. 超过50ms则可能存在长任务或布局抖动等性能问题
3. 需注意INP是统计周期内所有有效交互的第98百分位值

手动聚合近似 INP 并上报

参照web-vitals库的实现原理，建议采用轻量级数据收集方案：

1. 初始化const inpCandidates = []存储有效数据
2. 设置数组长度上限防止内存溢出
3. 通过定期排序取98分位值作为INP估算结果

关联 longtask 定为UI 卡顿根源

当出现异常高值时，需要结合longtask进行根因分析：

1. 配置独立Observerlongtask事件
2. 对比时间戳定位重叠的阻塞任务
3. 常见问题包括未优化的滚动事件和DOM操作等

综合运用事件、数据聚合和任务分析，可建立完整的INP坚控体系，为性能优化提供精准依据。