返回知识中心
平台

使用 PerformanceObserver 观察 Web 应用健康度

观察应用自有性能条目,聚合有用健康信号,并在不持久画像用户的前提下控制观察开销。

BotBrowser Team

文档中心

想直接进入 平台 文档吗?

这篇文章属于博客内容库。若你要步骤化配置、参考说明和持续更新,请直接进入对应 docs 分区。

PerformanceObserver 让应用在浏览器提供性能条目时接收它们。它适合回答“这条路由是否在服务目标内显示主要内容”这类自有问题,而不是完整诊断、设备基准或保存所有计时值的许可。观察边界、条目选择、聚合和开销需要一起设计。

PerformanceObserver 的作用

用回调创建观察器,只请求能支持决策的类型。observe({ type: 'navigation', buffered: true }) 可以包含已经创建的导航条目;paint 只有在浏览器支持时才可用。检测每个类型,把空列表视为有效证据,不要伪造数值。

const allowed = new Set(['navigation', 'paint', 'largest-contentful-paint']);
const samples = [];
const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (allowed.has(entry.entryType))
      samples.push({ type: entry.entryType, startTime: entry.startTime, duration: entry.duration });
  }
});
try {
  observer.observe({ type: 'paint', buffered: true });
} catch {
  /* 页面继续可用 */
}
observer.disconnect();

W3C Performance Timeline 定义通用条目模型,MDN PerformanceObserver 介绍 API。它们都不保证每个浏览器支持所有类型,也不说明延迟的单一原因。

选择有用条目

从用户可见结果出发。导航条目描述文档里程碑,绘制条目描述视觉结果,资源条目可显示某类自有依赖变慢。长任务只能提示主线程压力,不能独自证明原因。每个决策使用一个类型,并记录可比较的上下文。

情况记录预期动作
类型支持且有条目白名单类型、聚合、版本与批准的服务目标比较
类型支持但为空entry-empty 与上下文不生成虚构时长,继续
类型不支持entry-unsupported使用回退,保持流程可用
达到样本上限sample-cap-reached停止收集并聚合
流程结束或取消observer-disconnected忽略晚到回调并释放引用

浏览器条目不是服务器事实。BotBrowser 可以运行授权观察 fixture 并比较可见结果,但不保证所有运行时的条目支持、调度或生产健康度完全相同。

聚合与数据最小化

只保留条目类型、有界时长或分桶、fixture id、版本和结果。避免 URL、查询字符串、文本、账号和长期用户历史。导出前隐藏名称,优先保留百分位或计数,诊断运行 id 在批准窗口后过期。限制样本数量和观察时间,复制所需字段后清理引用。

缓存、可见性、恢复页面、调度和浏览器版本都会改变结果。标记这些上下文。缺少数据不是收集其他浏览器标识的理由,也不能据此推断用户或设备类别。

测试观察开销

用相同 fixture 比较启用和禁用观察器的结果。检查用户可见完成、回调数量、保留内存和聚合结果,并覆盖取消、离开页面、队列拥挤及不支持类型。页面应始终可用且清理有界。把正确性与速度分开,不发布通用阈值。

发布前冻结条目白名单、fixture、浏览器、聚合、保留和回滚条件。记录空条目等负面证据,版本变化后先重跑最小 fixture,再扩大观察窗口。

应用观察选定浏览器条目,聚合有界健康信号,并在隐私限制下断开观察。

BotBrowser 受控上下文支持运行授权的 PerformanceObserver 流程并比较可见健康结果,但不会保证每种运行时都有相同条目支持或生产性能。相关背景可参考浏览器性能优化指南和性能计时隐私指南。

在收集条目前定义路由和用户动作。保持 fixture、浏览器版本和上下文稳定,把缺少条目当作可接受回退。限制回调样本,结束时断开,忽略旧运行回调,分别比较冷启动和热启动。保留聚合结果,隐藏 URL,使诊断 id 过期,并测试取消、离开页面、焦点、本地化文本和不支持类型。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

观察保持有界,并服务于可见操作。

Public sources

#PerformanceObserver#Web 性能#应用健康度#隐私

让 BotBrowser 从研究走向生产

先用这些指南理解模型,再进入跨平台验证、隔离上下文和面向规模化的浏览器部署。