From 97cf6579c57a2fb356a67e8e2d181fb5cee8bcb1 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Mon, 19 Dec 2022 16:12:03 +0100 Subject: [PATCH 1/3] Add example to performance.timeOrigin --- .../web/api/performance/timeorigin/index.md | 48 +++++++++++++++++-- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/api/performance/timeorigin/index.md b/files/en-us/web/api/performance/timeorigin/index.md index c851e20a6a35596..ed61dfa0ffccebe 100644 --- a/files/en-us/web/api/performance/timeorigin/index.md +++ b/files/en-us/web/api/performance/timeorigin/index.md @@ -14,16 +14,56 @@ browser-compat: api.Performance.timeOrigin {{APIRef("Performance API")}} -The **`timeOrigin`** read-only property of the -{{domxref("Performance")}} interface returns the high resolution timestamp of the -start time of the performance measurement. +The **`timeOrigin`** read-only property of the {{domxref("Performance")}} interface returns the high resolution timestamp that is used as the baseline for performance-related timestamps. -{{AvailableInWorkers}} +In Window contexts, this value represents the time when navigation has started. In {{domxref("Worker")}} and {{domxref("ServiceWorker")}} contexts, this value represents the time when the worker is run. You can use this property to synchronize the time origins between the contexts (see example below). + +> **Note:** The value of `performance.timeOrigin` may differ from the value returned by {{jsxref("Date.now()")}} executed at the time origin, because `Date.now()` may have been impacted by system and user clock adjustments, clock skew, etc. The `timeOrigin` property is a [monotonic clock](https://w3c.github.io/hr-time/#sec-monotonic-clock) which current time never decreases and which isn't subject to these adjustments. ## Value A high resolution timestamp. +## 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. + +In worker.js + +```js +onconnect = function (event) { + const port = event.ports[0]; + + port.onmessage = function (event) { + const workerTaskStart = performance.now(); + // doSomeWork() + const workerTaskEnd = performance.now(); + }; + + // Send worker-relative timestamps to window context + port.postMessage({ + startTime: workerTaskStart + performance.timeOrigin, + endTime: workerTaskEnd + performance.timeOrigin, + }); +}; +``` + +In main.js + +```js +const worker = new SharedWorker("worker.js"); +worker.port.onmessage = function (event) { + // Translate worker-relative timestamps into window's time origin + 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); +}; +``` + ## Specifications {{Specifications}} From 3603bfe1625145256f6113d82a64f0c18a5c7487 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Tue, 20 Dec 2022 11:45:40 +0100 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: wbamberg --- files/en-us/web/api/performance/timeorigin/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/api/performance/timeorigin/index.md b/files/en-us/web/api/performance/timeorigin/index.md index ed61dfa0ffccebe..dd7650948feca02 100644 --- a/files/en-us/web/api/performance/timeorigin/index.md +++ b/files/en-us/web/api/performance/timeorigin/index.md @@ -33,7 +33,7 @@ To account for the different time origins in window and worker contexts, you can In worker.js ```js -onconnect = function (event) { +self.addEventListener("connect", (event) => { const port = event.ports[0]; port.onmessage = function (event) { @@ -47,21 +47,21 @@ onconnect = function (event) { startTime: workerTaskStart + performance.timeOrigin, endTime: workerTaskEnd + performance.timeOrigin, }); -}; +}); ``` In main.js ```js const worker = new SharedWorker("worker.js"); -worker.port.onmessage = function (event) { +worker.port.addEventListener("message", (event) => { // Translate worker-relative timestamps into window's time origin 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); -}; +}); ``` ## Specifications From 97fde072ca84373c12e968e1da13abd2d958528e Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Tue, 20 Dec 2022 11:58:52 +0100 Subject: [PATCH 3/3] Update comment wording --- files/en-us/web/api/performance/timeorigin/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/performance/timeorigin/index.md b/files/en-us/web/api/performance/timeorigin/index.md index dd7650948feca02..9c9228cab27ec52 100644 --- a/files/en-us/web/api/performance/timeorigin/index.md +++ b/files/en-us/web/api/performance/timeorigin/index.md @@ -42,7 +42,7 @@ self.addEventListener("connect", (event) => { const workerTaskEnd = performance.now(); }; - // Send worker-relative timestamps to window context + // Convert worker-relative timestamps to absolute timestamps, then send to the window port.postMessage({ startTime: workerTaskStart + performance.timeOrigin, endTime: workerTaskEnd + performance.timeOrigin, @@ -55,7 +55,7 @@ In main.js ```js const worker = new SharedWorker("worker.js"); worker.port.addEventListener("message", (event) => { - // Translate worker-relative timestamps into window's time origin + // Convert absolute timestamps into window-relative timestamps const workerTaskStart = event.data.startTime - performance.timeOrigin; const workerTaskEnd = event.data.endTime - performance.timeOrigin;