performanceobserver 是采集 lcp 和 fid 最可靠方式：lcp 取 entry.starttime，需 early 注册、type 为 'largest-contentful-paint'、buffered: true；fid 取 entry.duration，type 必为 'first-input'；二者超标可触发轻量 dom 降级策略。
用 PerformanceObserver 采集 LCP 和 FID 是当前最可靠、零竞态的方式，它不依赖手动轮询或时机敏感的 getEntriesByType 调用，能真实捕获浏览器内部计算出的首屏渲染与首次交互延迟。关键在于注册要早、类型要准、取值要对——之后再结合 DOM 状态做轻量干预，就能在不改架构的前提下提升感知性能。
注册 LCP 观察器并提取真实渲染时间
LCP 表示用户看到“主要内容”完成绘制的时间点，浏览器只上报一次，且仅当最大内容元素稳定可见后才触发。必须在 内尽早注册，否则可能错过：
- 监听 type 必须为
'largest-contentful-paint'，不能用'paint'或其他泛型类型 - 取值用
entry.startTime（毫秒），这是从 navigationStart 开始的真实耗时；entry.duration和entry.loadTime无业务意义 - 可选读取
entry.element判断是否为 banner 图、主标题等首屏核心节点，便于后续逻辑绑定 -
buffered: true要开启，确保页面加载中发生的 LCP 也能被捕获
监听 FID 并获取准确交互延迟
FID 反映用户第一次点击/输入后，主线程从事件分发到真正开始执行回调之间的空档。这个值无法靠 JS 打点模拟，只有浏览器内核能精确计算：
- 监听 type 必须为
'first-input'；'event'类型无法识别“首次”，也无processingStart字段 - FID 值就是
entry.duration（毫秒），它是processingStart - startTime的结果，直接可用 - 即使页面有多个
first-input条目（规范允许批量投递），也只需处理第一个，后续忽略 -
buffered: true同样必需，尤其对首屏按钮快速点击的用户，否则极易漏报
基于指标数值动态优化 DOM 渲染行为
拿到 LCP 和 FID 后，不一定要上报完就结束。可立刻触发轻量 DOM 层降级策略，避免重绘阻塞或资源浪费：
- LCP > 2500ms 时：移除非关键 SVG、暂停粒子动画、禁用视差滚动、隐藏低优先级图片占位符
- FID > 100ms 时：卸载非首屏区域的事件监听器、将 heavy 计算推迟到
requestIdleCallback、切换为简化版交互反馈（如去掉涟漪动效） - 两者都超标时：可进一步降级，比如用
textContent替代富文本渲染、折叠部分模块 DOM 树 - 所有操作建议通过 class 切换 + CSS 控制，而非直接
removeChild，保证可逆且不影响 SSR 一致性
注意事项与常见坑点
看似简单的 API，落地时容易因细节失效：
- 不要在 SPA 路由切换后重复
observe()同一 type，会导致重复回调或内存泄漏；应复用已注册的 observer - 移动端需注意：软键盘唤起、input 聚焦等行为可能触发
first-input，但若页面尚未可交互，FID 仍会如实上报 - 避免在回调里执行耗时操作（如 deep clone DOM、同步请求），否则反而拉高 FID
- CLS（布局偏移）虽未问及，但常与 LCP/FID 共存；若检测到高 CLS，可临时禁用图片自动宽高比、冻结广告位 DOM 尺寸
