必须在页面加载完成前初始化 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'] })的代码直接写在的<script></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 值完全不可信。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











