Performance: timeOrigin 属性
注意:此功能在 Web Workers 中可用。
Performance 接口的只读属性 timeOrigin 返回一个高分辨率时间戳,用作与性能相关的各个时间戳的基准。
在 Window 上下文中,此值代表导航开始的时间。在 Worker 和 ServiceWorker 上下文中,此值代表 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 |
浏览器兼容性
加载中…