PerformanceEventTiming - 提供了多个事件类型的计时信息

PerformanceEventTiming 是事件计时 API 的接口，提供以下事件类型的计时信息。

属性

PerformanceEventTiming.processingStart

返回事件调度开始的时间。

PerformanceEventTiming.processingEnd

返回事件分发结束的时间。

PerformanceEventTiming.cancelable

返回关联事件的 cancelable 属性。

PerformanceEventTiming.target

返回关联事件的最后一个目标（如果未删除）。

方法

PerformanceEventTiming.toJSON()

将 PerformanceEventTiming 对象转换为 JSON。

实例

以下实例显示了如何对所有事件使用 API：

const observer = new PerformanceObserver(function(list) {
    const perfEntries = list.getEntries().forEach(entry => {
        // 全程
        const inputDuration = entry.duration;
        // 输入延迟（处理事件之前）
        const inputDelay = entry.processingStart - entry.startTime;
        // 同步事件处理时间（在开始和结束分发之间）。
        const inputSyncProcessingTime = entry.processingEnd - entry.processingStart;
    });
});
// 注册事件观察者。
observer.observe({entryTypes: ["event"]});

我们还可以直接查询首次输入延迟。第一个输入延迟（或称为 FID），用于衡量从用户首次与页面进行交互（即当他们单击链接或点击按钮时）到浏览器实际能够开始处理事件处理程序来响应交互的时间。

// 跟踪是否（以及何时）首次隐藏页面，请参见：
// https://github.com/w3c/page-visibility/issues/29
// 注意：理想情况下，此检查将在文档中的 <head> 执行以避免在此代码运行之前可见性状态发生更改。
let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
document.addEventListener('visibilitychange', (event) => {
  firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
}, {once: true});

// 将传递的数据发送到分析端点。这段代码发送到 `/analytics`；您可以将其替换为自己的网址。
function sendToAnalytics(data) {
  const body = JSON.stringify(data);
  // 如果可用，使用 `navigator.sendBeacon()` ，否则回退到 `fetch()`。
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

// 使用 try / catch 而不是检测是否支持 `first-input` 功能，
// 因为某些浏览器在使用新的 `type` 选项时会抛出异常。
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  function onFirstInputEntry(entry) {
    // 如果在分派条目之前未隐藏页面，则仅报告 FID。当页面在后台选项卡中加载时，通常会发生这种情况。
    if (entry.startTime < firstHiddenTime) {
      const fid = entry.processingStart - entry.startTime;

      // 将 FID 值报告给分析端点。
      sendToAnalytics({fid});
    }
  }

  // 创建一个 `PerformanceObserver`，为每个条目调用 `onFirstInputEntry`。
  const po = new PerformanceObserver((entryList) => {
    entryList.getEntries().forEach(onFirstInputEntry);
  });

  // 观察 `first-input` 类型的条目，包括缓冲条目，即在调用下面的 `observe()` 之前发生的条目。
  po.observe({
    type: 'first-input',
    buffered: true,
  });
} catch (e) {
  // 如果浏览器不支持此 API，则什么也不做。
}

规范

规范 状态 备注
Event Timing API
PerformanceEventTiming 的定义		 编者的草案 初始定义。

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持7780 不支持 不支持 支持 不支持
cancelable7780 不支持 不支持 支持 不支持
processingEnd7780 不支持 不支持 支持 不支持
processingStart7780 不支持 不支持 支持 不支持
toJSON7780 不支持 不支持 支持 不支持

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持7777 未知 不支持 未知 支持 不支持
cancelable7777 未知 不支持 未知 支持 不支持
processingEnd7777 未知 不支持 未知 支持 不支持
processingStart7777 未知 不支持 未知 支持 不支持
toJSON7777 未知 不支持 未知 支持 不支持