Performance：timeOrigin 属性

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

在 Window 上下文中，此值表示导航开始的时间。在 Worker 和 ServiceWorker 上下文中，此值表示工作线程运行的时间。可以使用此属性来同步上下文之间的时间起点（请参见下面的示例）。

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

值

一个被认为是当前文档生命周期开始的高分辨率时间戳。它是这样计算的

  • 如果脚本的 全局对象 是一个 Window，则时间起点如下确定
    • 如果当前 Document 是在 Window 中加载的第一个文档，则时间起点是创建浏览器上下文的时间。
    • 如果在卸载先前加载到窗口中的文档的过程中，显示了一个确认对话框以让用户确认是否离开上一个页面，则时间起点是用户确认导航到新页面是可以接受的时间。
    • 如果上述情况均未确定时间起点，则时间起点是创建窗口当前 Document 的导航发生的时间。
  • 如果脚本的全局对象是 WorkerGlobalScope（即，脚本作为 Web 工作线程运行），则时间起点是创建工作线程的时刻。
  • 在所有其他情况下，时间起点未定义。

示例

同步上下文之间的时间

为了考虑窗口和工作线程上下文中不同的时间起点，您可以借助 timeOrigin 属性转换来自工作线程脚本的时间戳，以便整个应用程序的时间同步。

在 worker.js 中

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

  port.onmessage = function (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

浏览器兼容性

BCD 表格仅在浏览器中加载