直接用PerformanceObserver监听layout-shift类型条目是获取布局偏移数据的唯一可靠方式；必须早注册、启用buffered:true，仅累加hadRecentInput为false且value>0.002的条目，通过sources或affectedElements定位元素，秒级聚合上报。
直接用 PerformanceObserver 监听 layout-shift 类型条目，是获取布局偏移数据的唯一可靠方式。它不是“计算”出来的指标，而是浏览器在真实渲染过程中自动记录的原始事件——只有这样，才能捕获图片加载、字体切换、广告注入等引发的不可见重排。
注册 observer 必须早且带 buffer
脚本需在 <head> 中内联或 DOMContentLoaded 前执行，否则会漏掉首屏关键偏移：
- 调用
observe({ entryTypes: ['layout-shift'], buffered: true })——buffered: true 不可省略，否则页面加载初期的偏移（比如 fallback 字体 → 自定义字体切换）完全丢失 - 不设
buffered: true时，observer 只监听后续新增事件，历史条目不会回填 - SPA 场景下，每次路由跳转后需重新注册 observer，因为 layout-shift 不跨页面延续
只统计真正影响体验的偏移
CLS（Cumulative Layout Shift）只计入非用户主动触发的偏移。过滤逻辑必须严格：
- 仅累加
entry.hadRecentInput === false的条目，排除点击、滚动后 500ms 内发生的抖动 - 单次
entry.value小于 0.002 的偏移通常不计入 CLS，可忽略以减少噪音 - 避免把动画、悬停效果等预期变化误判为异常，它们往往伴随
hadRecentInput === true
定位抖动源头不能只靠 sources
entry.sources 是调试起点，但有局限性：
- 需显式启用
includeSources: true（Chrome 支持），否则sources为空数组 -
sources[0]?.node指向的是被移动的元素，但可能为null（如跨 iframe 或匿名文本节点） - 当
sourceElement不可用时，回退到entry.affectedElements（Chrome 120+），筛选出getComputedStyle(el).fontFamily含自定义字体名的文本容器 - 对匹配元素抓取
computedStyle.fontSize和lineHeight，对比 fallback 与目标字体的度量差异，确认是否由字体加载引起
上报要聚合，不能逐条发
一次图片加载或字体替换可能触发数十次微小偏移，逐条上报既低效又难分析：
- 按秒级时间戳分桶，每秒最多上报一次：包含该秒内最大
value、偏移次数、涉及元素标签名（如img、h1） - 触发上报阈值建议设为：单次
value ≥ 0.01或窗口内累计 ≥ 0.1 - 上报 payload 至少附带：当前 URL、视口尺寸、
entry.startTime、entry.value、node.tagName和node.id（若有） - 用
requestIdleCallback延迟执行，避免阻塞主线程渲染
