如何在Firefox中正确使用performance.measure接口

问题原因 #

Firefox 直到 99 版本才实现了performance.measure()调用后直接返回PerformanceMeasure对象的特性。你查询到的兼容标记仅代表 Firefox 支持performance.measure()的核心耗时统计功能，99 版本之前的 Firefox 调用该方法只会完成耗时记录，不会返回对应的对象实例，因此会拿到 undefined 结果。

兼容方案 #

方案1：手动获取已记录的统计对象 #

调用performance.measure()后通过performance.getEntriesByName()主动拉取对应结果即可，该写法全浏览器兼容：

performance.mark('start-mark');
performance.mark('stop-mark');

performance.measure('name','start-mark','stop-mark');
// 主动获取名为 name 的 measure 记录
const measureResult = performance.getEntriesByName('name', 'measure')[0];

方案2：封装统一返回值的工具方法 #

如果需要统一调用逻辑，可以对接口做一层兼容封装：

function getMeasure(name, startMark, endMark) {
  const nativeResult = performance.measure(name, startMark, endMark);
  // 原生有返回值直接返回，否则主动拉取
  if (nativeResult) return nativeResult;
  return performance.getEntriesByName(name, 'measure')[0];
}

// 使用示例
performance.mark('start-mark');
performance.mark('stop-mark');
const measureResult = getMeasure('name','start-mark','stop-mark');

内容的提问来源于stack exchange，提问作者nuEn