MDN Web Docs

Value

A high resolution timestamp which considered to be the beginning of the current document's lifetime. It's calculated like this:

  • If the script's global object is a Window, the time origin is determined as follows:

    • If the current Document is the first one loaded in the Window, the time origin is the time at which the browser context was created.
    • If during the process of unloading the previous document which was loaded in the window, a confirmation dialog was displayed to let the user confirm whether or not to leave the previous page, the time origin is the time at which the user confirmed that navigating to the new page was acceptable.
    • If neither of the above determines the time origin, then the time origin is the time at which the navigation responsible for creating the window's current Document took place.
  • If the script's global object is a WorkerGlobalScope (that is, the script is running as a web worker), the time origin is the moment at which the worker was created.

  • In all other cases, the time origin is undefined.

Examples

Synchronizing time between contexts

To account for the different time origins in window and worker contexts, you can translate the timestamps coming from worker scripts with the help of the timeOrigin property, so the timings synchronize for the entire application.

Warning: The monotonic clock may not tick while the operating system sleeps. If a window remains open during system sleep and then spawns a worker, translated timestamps from the two contexts may be offset by the duration of the sleep. There is no way to restore exact synchronization: Date.now() is subject to clock adjustments, while estimating the offset by exchanging timestamps introduces inaccuracy due to message latency.

In worker.js

js

self.addEventListener("connect", (event) => {
  const port = event.ports[0];
  port.onmessage = () => {
    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,
    });
  };
});

In 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);
});
worker.port.start();
worker.port.postMessage("start");

Specifications

Specification
High Resolution Time
# dom-performance-timeorigin

Browser compatibility

Help improve MDN

Yes No

Learn how to contribute

This page was last modified on by MDN contributors.

Read the original on developer.mozilla.org ↗