PerformanceServerTiming
Note: This feature is available in Web Workers
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The PerformanceServerTiming
interface surfaces server metrics that are sent with the response in the Server-Timing
HTTP header.
This interface is restricted to the same origin, but you can use the Timing-Allow-Origin
header to specify the domains that are allowed to access the server metrics. Note that this interface is only available in secure contexts (HTTPS) in some browsers.
Instance properties
PerformanceServerTiming.description
Read only-
A string value of the server-specified metric description, or an empty string.
PerformanceServerTiming.duration
Read only-
A double that contains the server-specified metric duration, or value
0.0
. PerformanceServerTiming.name
Read only-
A string value of the server-specified metric name.
Instance methods
PerformanceServerTiming.toJSON()
-
Returns a JSON representation of the
PerformanceServerTiming
object.
Example
Given a server that sends the Server-Timing
header, for example a Node.js server like this:
js
const http = require("http");
function requestHandler(request, response) {
const headers = {
"Server-Timing": `
cache;desc="Cache Read";dur=23.2,
db;dur=53,
app;dur=47.2
`.replace(/\n/g, ""),
};
response.writeHead(200, headers);
response.write("");
return setTimeout(() => {
response.end();
}, 1000);
}
http.createServer(requestHandler).listen(3000).on("error", console.error);
The PerformanceServerTiming
entries are now observable from JavaScript via the PerformanceResourceTiming.serverTiming
property and live on navigation
and resource
entries.
Example using a PerformanceObserver
, which notifies of new navigation
and resource
performance entries as they are recorded in the browser's performance timeline. Use the buffered
option to access entries from before the observer creation.
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"
// Logs "db () duration: 53"
// Logs "app () duration: 47.2"
});
});
});
["navigation", "resource"].forEach((type) =>
observer.observe({ type, buffered: true })
);
Example using Performance.getEntriesByType()
, which only shows navigation
and resource
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"
// Logs "db () duration: 53"
// Logs "app () duration: 47.2"
}
}
}
}
Specifications
Specification |
---|
Server Timing # the-performanceservertiming-interface |
Browser compatibility
BCD tables only load in the browser