Performance: timeOrigin 属性

Baseline 已广泛支持

此功能已成熟,并可在多种设备和浏览器版本上运行。自 2021 年 9 月起,所有浏览器均已支持此功能。

注意:此功能在 Web Workers 中可用。

Performance 接口的只读属性 timeOrigin 返回一个高分辨率时间戳,用作与性能相关的各个时间戳的基准。

在 Window 上下文中,此值代表导航开始的时间。在 WorkerServiceWorker 上下文中,此值代表 worker 运行的时间。您可以使用此属性来同步不同上下文之间的时间基准(请参阅下面的示例)。

注意: performance.timeOrigin 的值可能与在 time origin 时执行的 Date.now() 返回的值不同,因为 Date.now() 可能会受到系统和用户时钟调整、时钟偏差等因素的影响。timeOrigin 属性是一个 单调时钟,其当前时间永不减小,并且不受这些调整的影响。

一个高分辨率时间戳,被认为是当前文档生命周期的开始。它的计算方式如下:

  • 如果脚本的 全局对象 是一个 Window,则 time origin 的确定方式如下:

    • 如果当前 Document 是在 Window 中加载的第一个文档,则 time origin 是浏览器上下文创建时的时间。
    • 如果在卸载之前在窗口中加载的文档的过程中,显示了确认对话框,以允许用户确认是否离开上一页,则 time origin 是用户确认导航到新页面可接受时的时间。
    • 如果以上任一情况均未确定 time origin,则 time origin 是导致窗口当前 Document 出现的导航发生时的时间。
  • 如果脚本的全局对象是 WorkerGlobalScope(即脚本作为 web worker 运行),则 time origin 是 worker 被创建时的时刻。

  • 在所有其他情况下,time origin 为 undefined。

示例

同步上下文之间的时间

为了解决窗口和 worker 上下文中不同的 time origin 问题,您可以通过 timeOrigin 属性来转换来自 worker 脚本的时间戳,从而使整个应用程序的计时保持同步。

在 worker.js 中

js
self.addEventListener("connect", (event) => {
  const port = event.ports[0];

  port.onmessage = (event) => {
    const workerTaskStart = performance.now();
    // doSomeWork()
    const workerTaskEnd = performance.now();
  };

  // Convert worker-relative timestamps to absolute timestamps, then send to the window
  port.postMessage({
    startTime: workerTaskStart + performance.timeOrigin,
    endTime: workerTaskEnd + performance.timeOrigin,
  });
});

在 main.js 中

js
const worker = new SharedWorker("worker.js");
worker.port.addEventListener("message", (event) => {
  // Convert absolute timestamps into window-relative timestamps
  const workerTaskStart = event.data.startTime - performance.timeOrigin;
  const workerTaskEnd = event.data.endTime - performance.timeOrigin;

  console.log("Worker task start: ", workerTaskStart);
  console.log("Worker task end: ", workerTaskEnd);
});

规范

规范
高精度时间
# dom-performance-timeorigin

浏览器兼容性