必须在页面加载完成前初始化 PerformanceObserver，否则FCP、LCP等首屏指标必然丢失；navigation条目需在document.readyState==='complete'或load事件后获取，且仅记录初始导航；paint类observer须置于head内同步执行，LCP取list.getEntries().pop()；跨域资源需声明crossorigin属性才能获取duration。
直接在页面加载完成前初始化 PerformanceObserver，否则 FCP、LCP 等首屏指标必然丢失——这不是代码写错，而是浏览器根本没机会把它们塞进队列。
performance.getEntriesByType('navigation') 返回空数组怎么办
这不是 API 失效，是调用时机或上下文错了。
- 必须等
document.readyState === 'complete'或监听window.addEventListener('load', ...)后再调用，提前执行会返回空 - 不要在新打开的空白页（如
about:blank）里测试，它没有导航上下文，navigation条目天然不存在 - 检查
performance.getEntries()是否有内容；若存在但navigation为空，确认类型名拼写：必须是小写的'navigation'，不是'Navigation'或'nav' - SPA 路由跳转不会触发新的
navigation条目，它只记录整个文档的初始导航（即页面首次加载）
用 PerformanceObserver 监听 FCP/LCP 必须在 内同步执行
FCP 和 LCP 是“一过性”事件，一旦渲染完成就生成并可能被丢弃。延迟注册 observer 就等于放弃采集。
- 把
new PerformanceObserver(...).observe({ entryTypes: ['paint'] })的代码直接写在<head>的<script>标签里，不加defer、不包函数、不等任何钩子 -
paint类型用于捕获first-contentful-paint，而largest-contentful-paint必须单独监听，不能混用同一 observer - 对
largest-contentful-paint，取list.getEntries().pop()才是最终稳定值，因为 LCP 可能被后续更大元素覆盖 - 如果用第三方 SDK 的“初始化完成”回调来启动 observer，大概率已错过首帧绘制
getEntriesByType('resource') 拿不到 duration 怎么办
跨域资源默认屏蔽关键字段，不是数据没收集到，是浏览器主动清零了 duration 和部分时间戳。
立即学习“前端免费学习笔记（深入）”；
- 确保资源标签声明
crossorigin属性，例如：<script src="https://cdn.example.com/a.js" crossorigin></script> - 动态插入的资源（如 JS 里
document.createElement('img').src = ...）需手动补crossOrigin = 'anonymous' - 调用前确认已在
load事件后执行，否则部分资源可能尚未完成加载，duration仍为 0 - 过滤掉
entry.duration 或 <code>entry.initiatorType === ''的条目，它们通常是预连接、空响应或 CORS 失败残留
performance.now() 测量代码耗时却总偏小
不是精度问题，是你没避开 JS 引擎优化或测量范围太窄。
- 避免只测单次执行：
performance.now()高精度但易受 V8 TurboFan 优化干扰，应循环执行 100+ 次取平均值 - 别把
performance.now()和Date.now()混用对比——前者是浮点毫秒（微秒级），后者是整数毫秒，差值可能失真 - 若测异步逻辑（如
fetch后续处理），需确保start在请求发出前，end在then或await完成后，中间不能有未 await 的 Promise 漏洞 - 注意
performance.timeOrigin是当前上下文起始时间戳，所有startTime字段都基于它，做减法即可，无需额外转换
最容易被忽略的是：PerformanceObserver 的 entryTypes 列表必须在 observe 前就确定，运行时修改不会生效；另外，layout-shift 条目默认包含用户输入后的偏移，但 Web Vitals 要求过滤掉 hadRecentInput === true 的项，否则 CLS 值完全不可信。
