Performance: timeOrigin-Eigenschaft

Ein hochauflösender Zeitstempel, der als Beginn der Lebensdauer des aktuellen Dokuments betrachtet wird. Er wird wie folgt berechnet:

• Wenn das globale Objekt des Skripts ein Window ist, wird der Zeitursprung wie folgt bestimmt:

  • Wenn das aktuelle Document das erste ist, das im Window geladen wurde, ist der Zeitursprung die Zeit, zu der der Browser-Kontext erstellt wurde.
  • Wenn während des Prozesses des Entladens des vorherigen Dokuments, das im Fenster geladen war, ein Bestätigungsdialog angezeigt wurde, um dem Benutzer zu erlauben, zu bestätigen, ob die vorherige Seite verlassen werden soll oder nicht, ist der Zeitursprung der Moment, in dem der Benutzer bestätigte, dass die Navigation zur neuen Seite akzeptabel war.
  • Wenn keiner der oben genannten Punkte den Zeitursprung bestimmt, ist der Zeitursprung der Moment, in dem die Navigation, die für die Erstellung des aktuellen Dokuments im Fenster verantwortlich ist, stattfand.

• Wenn das globale Objekt des Skripts ein WorkerGlobalScope ist (d.h. das Skript wird als Web Worker ausgeführt), ist der Zeitursprung der Moment, in dem der Worker erstellt wurde.

• In allen anderen Fällen ist der Zeitursprung undefiniert.

Um die unterschiedlichen Zeitursprünge in Window- und Worker-Kontexten auszugleichen, können Sie die Zeitstempel aus Worker-Skripten mithilfe der timeOrigin-Eigenschaft übersetzen, sodass die Zeiten für die gesamte Anwendung synchronisiert werden.

In worker.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,
  });
});

In main.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);
});