From ceda56b95302082c7d4fd645811460d4217b8aca Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Tue, 29 Nov 2022 15:36:50 +0100 Subject: [PATCH 1/2] Add examples to server timing pages --- .../servertiming/index.md | 53 ++++++++++++++++++- .../description/index.md | 44 +++++++++++++++ .../performanceservertiming/duration/index.md | 47 +++++++++++++++- .../api/performanceservertiming/name/index.md | 44 +++++++++++++++ .../performanceservertiming/tojson/index.md | 22 +++++--- 5 files changed, 198 insertions(+), 12 deletions(-) diff --git a/files/en-us/web/api/performanceresourcetiming/servertiming/index.md b/files/en-us/web/api/performanceresourcetiming/servertiming/index.md index ed522ec4ce3d178..32e20e6f2b7c5fe 100644 --- a/files/en-us/web/api/performanceresourcetiming/servertiming/index.md +++ b/files/en-us/web/api/performanceresourcetiming/servertiming/index.md @@ -14,13 +14,62 @@ browser-compat: api.PerformanceResourceTiming.serverTiming {{APIRef("Performance API")}} {{securecontext_header}} -The **`serverTiming`** read-only property returns an array of -{{domxref("PerformanceServerTiming")}} entries containing server timing metrics. +The **`serverTiming`** read-only property returns an array of {{domxref("PerformanceServerTiming")}} entries containing server timing metrics. + +Server timing metrics require the server to send the {{HTTPHeader("Server-Timing")}} header. For example: + +```http +Server-Timing: cache;desc="Cache Read";dur=23.2 +``` ## Value An array of {{domxref("PerformanceServerTiming")}} entries. +## Examples + +### Logging server timing entries + +You can use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries. Each server entry's duration is logged to the console. + +```js +const observer = new PerformanceObserver((list) => { + list.getEntries().forEach((entry) => { + entry.serverTiming.forEach((serverEntry) => { + console.log(`${serverEntry.name} duration: ${serverEntry.duration}`); + }); + }); +}); + +observer.observe({ entryTypes: ["resource", "navigation"] }); +``` + +Alternatively, you can use {{domxref("Performance.getEntriesByType()")}} to get performance entries present in the browser's performance timeline at the time you call this method: + +```js +for (const entryType of ["navigation", "resource"]) { + for (const { name: url, serverTiming } of performance.getEntriesByType( + entryType + )) { + if (serverTiming) { + for (const { name, duration } of serverTiming) { + console.log(`${url}: ${name} duration: ${duration}`); + } + } + } +} +``` + +### Cross-origin server timing information + +Access to server timing information is restricted to the same origin. To expose cross-origin timing information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set. + +For example, to allow `https://developer.mozilla.org` to see server timing information, the cross-origin resource should send: + +```http +Timing-Allow-Origin: https://developer.mozilla.org +``` + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceservertiming/description/index.md b/files/en-us/web/api/performanceservertiming/description/index.md index 49251a5865745eb..a2d237efb3820ff 100644 --- a/files/en-us/web/api/performanceservertiming/description/index.md +++ b/files/en-us/web/api/performanceservertiming/description/index.md @@ -20,6 +20,50 @@ string. A string. +## Examples + +### Logging server timing entries + +Given a {{HTTPHeader("Server-Timing")}} header with a description `"Cache Read"`: + +```http +Server-Timing: cache;desc="Cache Read";dur=23.2 +``` + +You can use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. + +```js +const observer = new PerformanceObserver((list) => { + list.getEntries().forEach((entry) => { + entry.serverTiming.forEach((serverEntry) => { + console.log( + `${serverEntry.name} (${serverEntry.description}) duration: ${serverEntry.duration}` + ); + // Logs "cache (Cache Read) duration: 23.2" + }); + }); +}); + +observer.observe({ entryTypes: ["resource", "navigation"] }); +``` + +Alternatively, you can use {{domxref("Performance.getEntriesByType()")}} to get performance entries present in the browser's performance timeline at the time you call this method: + +```js +for (const entryType of ["navigation", "resource"]) { + for (const { name: url, serverTiming } of performance.getEntriesByType( + entryType + )) { + if (serverTiming) { + for (const { name, description, duration } of serverTiming) { + console.log(`${name} (${description}) duration: ${duration}`); + // Logs "cache (Cache Read) duration: 23.2" + } + } + } +} +``` + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceservertiming/duration/index.md b/files/en-us/web/api/performanceservertiming/duration/index.md index d50396786a6b19f..51b5a54b0e63971 100644 --- a/files/en-us/web/api/performanceservertiming/duration/index.md +++ b/files/en-us/web/api/performanceservertiming/duration/index.md @@ -12,13 +12,56 @@ browser-compat: api.PerformanceServerTiming.duration {{APIRef("Performance API")}} -The **`duration`** read-only property returns a double that -contains the server-specified metric duration, or value `0.0`. +The **`duration`** read-only property returns a double that contains the server-specified metric duration, or value `0.0`. ## Value A number. +## Examples + +### Logging server timing entries + +Given a {{HTTPHeader("Server-Timing")}} header with a duration of `23.2`: + +```http +Server-Timing: cache;desc="Cache Read";dur=23.2 +``` + +You can use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. + +```js +const observer = new PerformanceObserver((list) => { + list.getEntries().forEach((entry) => { + entry.serverTiming.forEach((serverEntry) => { + console.log( + `${serverEntry.name} (${serverEntry.description}) duration: ${serverEntry.duration}` + ); + // Logs "cache (Cache Read) duration: 23.2" + }); + }); +}); + +observer.observe({ entryTypes: ["resource", "navigation"] }); +``` + +Alternatively, you can use {{domxref("Performance.getEntriesByType()")}} to get performance entries present in the browser's performance timeline at the time you call this method: + +```js +for (const entryType of ["navigation", "resource"]) { + for (const { name: url, serverTiming } of performance.getEntriesByType( + entryType + )) { + if (serverTiming) { + for (const { name, description, duration } of serverTiming) { + console.log(`${name} (${description}) duration: ${duration}`); + // Logs "cache (Cache Read) duration: 23.2" + } + } + } +} +``` + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceservertiming/name/index.md b/files/en-us/web/api/performanceservertiming/name/index.md index b3fee5540ed8912..96d698abb8edbb4 100644 --- a/files/en-us/web/api/performanceservertiming/name/index.md +++ b/files/en-us/web/api/performanceservertiming/name/index.md @@ -19,6 +19,50 @@ string value of the server-specified metric name. A string. +## Examples + +### Logging server timing entries + +Given a {{HTTPHeader("Server-Timing")}} header with the name `cache`: + +```http +Server-Timing: cache;desc="Cache Read";dur=23.2 +``` + +You can use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. + +```js +const observer = new PerformanceObserver((list) => { + list.getEntries().forEach((entry) => { + entry.serverTiming.forEach((serverEntry) => { + console.log( + `${serverEntry.name} (${serverEntry.description}) duration: ${serverEntry.duration}` + ); + // Logs "cache (Cache Read) duration: 23.2" + }); + }); +}); + +observer.observe({ entryTypes: ["resource", "navigation"] }); +``` + +Alternatively, you can use {{domxref("Performance.getEntriesByType()")}} to get performance entries present in the browser's performance timeline at the time you call this method: + +```js +for (const entryType of ["navigation", "resource"]) { + for (const { name: url, serverTiming } of performance.getEntriesByType( + entryType + )) { + if (serverTiming) { + for (const { name, description, duration } of serverTiming) { + console.log(`${name} (${description}) duration: ${duration}`); + // Logs "cache (Cache Read) duration: 23.2" + } + } + } +} +``` + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceservertiming/tojson/index.md b/files/en-us/web/api/performanceservertiming/tojson/index.md index 419c73bda264cb8..83df5cb2bf4505e 100644 --- a/files/en-us/web/api/performanceservertiming/tojson/index.md +++ b/files/en-us/web/api/performanceservertiming/tojson/index.md @@ -32,20 +32,26 @@ A {{jsxref("JSON")}} object that is the serialization of the {{domxref("Performa ## Examples -### Using the toJSON method +### Logging server timing entries -In this example, calling `serverEntry.toJSON()` returns a JSON representation of the `PerformanceServerTiming` object. +Given this {{HTTPHeader("Server-Timing")}} header: + +```http +Server-Timing: cache;desc="Cache Read";dur=23.2 +``` + +You can use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. ```js const observer = new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { - entry.serverTiming.forEach((serverEntry) => { - console.log(serverEntry.toJSON()); - }); + entry.serverTiming.forEach((serverEntry) => { + console.log(serverEntry.toJSON()); + }); }); }); -observer.observe({ entryTypes: ["resource"] }); +observer.observe({ entryTypes: ["resource", "navigation"] }); ``` This would log a JSON object like so: @@ -53,8 +59,8 @@ This would log a JSON object like so: ```json { "name": "cache", - "duration": 0, - "description": "hit-front" + "duration": 23.2, + "description": "Cache Read" } ``` From f2b30de9c2c4ea849e44f72a8c2a9937c3325e58 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Tue, 29 Nov 2022 18:27:13 +0100 Subject: [PATCH 2/2] Review feedback --- .../web/api/performanceservertiming/description/index.md | 4 ++-- .../en-us/web/api/performanceservertiming/duration/index.md | 6 +++--- files/en-us/web/api/performanceservertiming/name/index.md | 4 ++-- files/en-us/web/api/performanceservertiming/tojson/index.md | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/api/performanceservertiming/description/index.md b/files/en-us/web/api/performanceservertiming/description/index.md index a2d237efb3820ff..f19df33d35b0938 100644 --- a/files/en-us/web/api/performanceservertiming/description/index.md +++ b/files/en-us/web/api/performanceservertiming/description/index.md @@ -24,13 +24,13 @@ A string. ### Logging server timing entries -Given a {{HTTPHeader("Server-Timing")}} header with a description `"Cache Read"`: +Server timing metrics require the server to send the {{HTTPHeader("Server-Timing")}} header. For example: ```http Server-Timing: cache;desc="Cache Read";dur=23.2 ``` -You can use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. +Then use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. ```js const observer = new PerformanceObserver((list) => { diff --git a/files/en-us/web/api/performanceservertiming/duration/index.md b/files/en-us/web/api/performanceservertiming/duration/index.md index 51b5a54b0e63971..b92b45099500251 100644 --- a/files/en-us/web/api/performanceservertiming/duration/index.md +++ b/files/en-us/web/api/performanceservertiming/duration/index.md @@ -12,7 +12,7 @@ browser-compat: api.PerformanceServerTiming.duration {{APIRef("Performance API")}} -The **`duration`** read-only property returns a double that contains the server-specified metric duration, or value `0.0`. +The **`duration`** read-only property returns a double that contains the server-specified metric duration, or the value `0.0`. ## Value @@ -22,13 +22,13 @@ A number. ### Logging server timing entries -Given a {{HTTPHeader("Server-Timing")}} header with a duration of `23.2`: +Server timing metrics require the server to send the {{HTTPHeader("Server-Timing")}} header. For example: ```http Server-Timing: cache;desc="Cache Read";dur=23.2 ``` -You can use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. +Then use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. ```js const observer = new PerformanceObserver((list) => { diff --git a/files/en-us/web/api/performanceservertiming/name/index.md b/files/en-us/web/api/performanceservertiming/name/index.md index 96d698abb8edbb4..bb0dad856d45002 100644 --- a/files/en-us/web/api/performanceservertiming/name/index.md +++ b/files/en-us/web/api/performanceservertiming/name/index.md @@ -23,13 +23,13 @@ A string. ### Logging server timing entries -Given a {{HTTPHeader("Server-Timing")}} header with the name `cache`: +Server timing metrics require the server to send the {{HTTPHeader("Server-Timing")}} header. For example: ```http Server-Timing: cache;desc="Cache Read";dur=23.2 ``` -You can use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. +Then use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. ```js const observer = new PerformanceObserver((list) => { diff --git a/files/en-us/web/api/performanceservertiming/tojson/index.md b/files/en-us/web/api/performanceservertiming/tojson/index.md index 83df5cb2bf4505e..221dcb562a21718 100644 --- a/files/en-us/web/api/performanceservertiming/tojson/index.md +++ b/files/en-us/web/api/performanceservertiming/tojson/index.md @@ -34,13 +34,13 @@ A {{jsxref("JSON")}} object that is the serialization of the {{domxref("Performa ### Logging server timing entries -Given this {{HTTPHeader("Server-Timing")}} header: +Server timing metrics require the server to send the {{HTTPHeader("Server-Timing")}} header. For example: ```http Server-Timing: cache;desc="Cache Read";dur=23.2 ``` -You can use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. +Then use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded. ```js const observer = new PerformanceObserver((list) => {