performanceobserver 必须显式指定 entrytypes 或 type 才能触发监听，且 navigation/paint 需加 buffered: true 才不丢失首屏数据；回调需全量处理 entries，避免内存泄漏与性能干扰。
PerformanceObserver 构造时必须传入 entryTypes 或 type 选项
不传或传错类型，监听器根本不会触发——这是最常被忽略的起点错误。浏览器只在你明确声明想观察哪类性能条目时才开始收集和派发，不是“默认全开”。PerformanceObserver 不会主动缓存历史条目，也不会回溯已发生的事件。
实操建议：
- 必须显式指定
entryTypes数组，例如['navigation', 'resource', 'paint', 'longtask']；或者用新版type单值写法（仅 Chromium 120+ 支持） - 不要写成
new PerformanceObserver(cb).observe({})—— 空配置等于没观察 -
navigation类型需在页面加载后立即注册，否则首屏navigation条目会丢失（它不支持 buffered） - 若要监听
longtask，需确保目标环境支持（Chrome 70+，Firefox 不支持）
observe() 后未启用 buffered 会导致 navigation / paint 条目丢失
navigation 和 paint 这两类条目默认不缓冲，注册 observer 之前发生的记录直接丢弃。比如你在 window.onload 之后才调用 observe()，那首屏 FP、FCP、LCP 几乎肯定收不到。
实操建议：
- 对
navigation、paint、mark、measure等类型，务必加{ buffered: true } - 正确写法：
observer.observe({ entryTypes: ['navigation', 'paint'], buffered: true }) -
resource和longtask默认就是 buffered，但显式写上更清晰 - 注意：
buffered: true不是“开启历史回放”，而是告诉浏览器“把已采集但尚未派发的条目也推给我”
回调中未及时处理 entries，导致重复触发或内存泄漏
PerformanceObserver 的回调是批量派发的，一次可能含几十个 PerformanceEntry。如果只取 entries[0] 就返回，后面条目就永远卡在队列里；如果反复 console.log(entries) 而不清理引用，也可能拖慢主线程。
实操建议：
- 总是遍历
entries全量处理：entries.forEach(entry => { /* ... */ }) - 避免在回调里做重渲染、DOM 操作或同步网络请求——这些会延长任务时长，干扰真实性能数据
- 如需上报，建议节流（例如每 5 秒聚合一次）或使用
setTimeout(..., 0)延迟到空闲帧 - 不用手动清空 performance buffer，浏览器自动管理；但别在回调里长期持有
entries引用（尤其entry.toJSON()后的对象）
监听 resource 时误判 preloaded / prefetch 资源的 timing
通过 entryType === 'resource' 拿到的条目，其 startTime、duration 在 preload/prefetch 场景下容易误解：它们的 startTime 是资源实际开始下载的时间（可能远晚于 link[rel=preload] 解析时间），而 initiatorType 为 'preload' 或 'prefetch'，不是 'script' 或 'img'。
实操建议：
- 判断资源是否由预加载触发，看
entry.initiatorType，而不是靠 URL 后缀或 DOM 节点位置 -
entry.duration对 preload 资源仍有效，但entry.transferSize可能为 0（表示命中 HTTP 缓存或预加载未真正发起请求） - 不要用
resource条目的startTime去算“页面解析到资源发起的耗时”——这个时间点不可靠，应结合navigation中的domContentLoadedEventStart或自定义mark定位
真正难的不是注册 observer，而是理解每个 entryType 的采集时机、缓冲策略和字段含义。Chrome DevTools 的 Performance 面板里看到的 LCP 时间，和你代码里拿到的 paint 条目里的 startTime，数值一致但语义不同——前者是渲染管线最终输出，后者是绘制 API 上报节点。这点不厘清，监控数据就容易自相矛盾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
