如何利用 PerformanceObserver 实现对 LCP、FID、CLS 等核心指标的监听

陆砚码

2026-09-23 • 👁 1人浏览过

PerformanceObserver 可直接监听 LCP、CLS 和 INP（替代已弃用的 FID），FCP 需在 load 后主动查询；所有监听必须在页面加载早期注册并设置 buffered: true，LCP 取 entry.startTime，CLS 累加 hadRecentInput 为 false 的 layout-shift 值，INP 取所有交互中最大 duration。可以直接用

PerformanceObserver

监听 LCP、CLS，FCP 需主动查表，FID 已被弃用，应改用 INP。所有监听必须在页面加载早期注册，并设置

buffered: true

，否则会漏掉首屏关键数据。监听 LCP：捕获最大内容绘制时间 LCP 只触发一次，代表用户视口内“主要内容”完成渲染的时刻。监听必须早于

load

事件，推荐放在

中执行：观察类型为

'largest-contentful-paint'

，不能用

'paint'

或其他泛型取值用

entry.startTime

（单位毫秒，从 navigationStart 起算）务必设置

buffered: true

，确保能收到页面加载过程中已发生的 LCP 条目可选读取

entry.element

判断是否为 banner、主图或标题等首屏核心节点监听 CLS：累加所有无交互触发的布局偏移 CLS 是动态累积值，需持续监听并叠加所有符合条件的 layout-shift 条目：观察类型为

'layout-shift'

只累加

entry.hadRecentInput === false

的条目，排除用户操作引起的偏移每次回调中对

entry.value

求和（不是取最后一次），初始值设为 0 建议在

visibilitychange

事件触发且

document.hidden === true

时汇总上报，避免卸载前遗漏获取 FCP：无法监听，需主动查询 FCP 不支持实时监听（Chrome 120+ 才实验性支持

paint

类型），稳妥做法是在

load

后主动读取：调用

performance.getEntriesByName('first-contentful-paint', 'paint')

取返回数组第 0 项的

startTime

；若为空，说明尚未触发，可设 5s 超时兜底 Safari 对

paint

类型支持不一致，必要时 fallback 到

performance.timing

计算近似值替换 FID：改用 INP 并取最差交互响应 FID 已于 2024 年被 Google 正式弃用，INP（Interaction to Next Paint）是当前标准交互指标：观察类型为

'event'

，过滤出

entry.interactionId > 0

的条目 INP 是所有有效交互中最大的

entry.duration

（含输入处理 + 渲染延迟）不是首次值、也不是平均值，必须遍历全部条目后取最大监听同样需在

document.readyState === 'loading'

阶段就位，否则错过首屏点击

相关文章