JavaScript PerformanceObserver.supportedEntryTypes 检查浏览器可用性能条目的配置方法

跨浏览器使用 PerformanceObserver 时，不要先假定所有用户代理都支持同一组性能条目。更稳妥的做法是先读取 PerformanceObserver.supportedEntryTypes，把业务真正需要的类型与支持列表求交集，再决定是否调用 observe()。这样既能避开无效的 entryTypes，也能把“不支持该指标”与“指标暂时没有数据”区分开。

先把支持列表和业务需求求交集

PerformanceObserver.supportedEntryTypes 返回字符串数组，例如某个浏览器可能支持 navigation、resource 或 paint。列表内容会随浏览器和平台变化，所以代码应把它当作运行时能力信息，而不是写死的兼容性常量。属性本身也可能在较旧环境中不存在，首个判断要覆盖这一层。

const wantedTypes = ["navigation", "resource", "paint"];

// 先确认观察器和能力列表存在，避免旧环境直接读取 undefined
const observerTypes = window.PerformanceObserver?.supportedEntryTypes;
const supportedTypes = Array.isArray(observerTypes) ? observerTypes : [];

// 只保留业务需要且当前用户代理声明支持的类型
const usableTypes = wantedTypes.filter((entryType) =>
  supportedTypes.includes(entryType)
);

if (usableTypes.length === 0) {
  // 没有可观察类型时保留普通页面逻辑，不把它误报成“没有性能数据”
  console.info("当前环境没有可用的性能条目类型");
} else {
  // 多类型观察使用 entryTypes；回调只会收到这些类型的条目
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.info(entry.entryType, entry.name);
    }
  });
  observer.observe({ entryTypes: usableTypes });
}

这里的交集只回答“能不能尝试观察”。如果列表包含某种类型，不代表该页面一定会产生对应条目，也不代表所有相关字段在不同浏览器中都完全一致。回调内仍应按 entry.entryType 分支处理，并把缺少条目视为正常结果，而不是直接抛出业务错误。

按观察任务选择 entryTypes 或 type

只想同时监听多个普通类型时，使用 observe({ entryTypes: [...] })。但 buffered 和 durationThreshold 只能与单个 type 配合，不能和 entryTypes 混写。需要回放观察开始前已经进入性能时间线的条目时，也要确认目标类型支持缓冲读取。

function observeOne(type, options = {}) {
  const supported = window.PerformanceObserver?.supportedEntryTypes ?? [];

  // 单类型配置前再次检查，避免把不支持的 type 交给浏览器
  if (!Array.isArray(supported) || !supported.includes(type)) {
    return false;
  }

  const observer = new PerformanceObserver((list) => {
    // 只处理当前 type，避免回调混入其他观察任务的判断
    for (const entry of list.getEntries()) {
      console.info(`${type}: ${entry.name}`);
    }
  });

  // buffered、durationThreshold 等单类型选项必须跟 type 一起使用
  observer.observe({ type, ...options });
  return true;
}

// 需要读取已经存在的 resource 条目时，使用单一 type
observeOne("resource", { buffered: true });

如果只是多类型订阅，不要为了使用 buffered 把数组拆成多次不必要的观察；如果确实要读取历史缓冲条目，则应按类型分别调用并分别记录结果。另一个容易忽略的点是：entryTypes 与 type 不能同时提供，后者也不能一次写入多个逗号分隔的类型。

空交集和不支持类型怎样降级

降级策略应由业务目标决定。性能观测通常是增强能力，最安全的默认动作是跳过该观察，不阻塞页面主流程；如果产品确实需要某项数据，则可以记录一次低噪声的能力缺失事件，或切换到已有的普通计时方案，但不能把替代数据冒充成同一种 PerformanceEntry。

常见问题

supportedEntryTypes 返回支持列表就一定有对应条目吗？

不一定。它描述用户代理支持的类型，页面是否已经产生条目还取决于导航、资源加载和页面行为。

能不能直接把所有类型写入 entryTypes？

不建议。先求交集可以减少无效配置，也能让代码明确区分“不支持”和“当前没有数据”。

为什么 buffered 配置要改用 type？

规范化的观察接口把 buffered 和 durationThreshold 设计为单类型选项，它们不能与 entryTypes 数组同时使用。