Производительность: свойство timeOrigin

Чтение-только свойство timeOrigin интерфейса Performance возвращает отметку времени высокой точности, которая используется в качестве базовой для временных меток, связанных с производительностью.

В контексте окна это значение представляет время начала навигации. В контексте Worker и ServiceWorker это значение представляет время запуска потока. Вы можете использовать это свойство для синхронизации временных исходных точек между контекстами (см. пример ниже).

Отметка времени высокой точности, которая считается началом текущего жизненного цикла документа. Она рассчитывается следующим образом:

• Если глобальный объект скрипта — Window, время начала отсчёта определяется следующим образом:

  • Если текущий Document является первым загруженным в Window, время начала отсчёта — это момент создания контекста браузера.
  • Если при закрытии предыдущего документа, загруженного в окне, было отображено диалоговое окно подтверждения, чтобы пользователь подтвердил желание покинуть предыдущую страницу, время начала отсчёта — это момент подтверждения пользователем того, что навигация на новую страницу приемлема.
  • Если ни одно из вышеперечисленных условий не определяет время начала отсчёта, то время начала отсчёта — это время навигации, ответственной за создание текущего Document окна.

• Если глобальный объект скрипта — WorkerGlobalScope (то есть скрипт выполняется как поток Web Worker), время начала отсчёта — это момент создания потока.

• Во всех остальных случаях время начала отсчёта является неопределённым.

Для учёта различных временных исходных точек в контекстах окна и потока вы можете преобразовать отметки времени, поступающие из потоков скриптов, с помощью свойства timeOrigin, чтобы синхронизировать время для всего приложения.

В 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,
  });
});

В 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);
});