Skip to content

Instantly share code, notes, and snippets.

@paulirish

paulirish/server-timing-demo.js

Last active August 7, 2024 16:56
Show Gist options
  • Save paulirish/a76ac17fc211b019e538c09d8d827691 to your computer and use it in GitHub Desktop.
Save paulirish/a76ac17fc211b019e538c09d8d827691 to your computer and use it in GitHub Desktop.
Download ZIP
Demo of server timing values. visualized in chrome devtools
Raw
server-timing-demo.js
// see for screenshot:
// https://twitter.com/paul_irish/status/829090506084749312
const http = require('http');
function requestHandler(request, response) {
const headers = {
'Server-Timing': `
sql-1;desc="MySQL lookup Server";dur=100,
sql-2;dur=900;desc="MySQL shard Server #1",
fs;dur=600;desc="FileSystem",
cache;dur=300;desc="Cache",
other;dur=200;desc="Database Write",
other;dur=110;desc="Database Read",
cpu;dur=1230;desc="Total CPU"
`.replace(/\n/g, '')
};
response.writeHead(200, headers);
response.write('');
return setTimeout(_ => {
response.end();
}, 1230)
}
http.createServer(requestHandler)
.listen(8082)
.on('error', console.error);
Raw
server-timing-trailers.js
// FYI trailers. This doesn't work without browser support. See https://www.fastly.com/blog/supercharging-server-timing-http-trailers/
const fs = require('fs');
const http2 = require('http2');
// Need self-signed certificates because trailers only supported in Cronet for HTTP2
// mkcert localhost 127.0.0.1 ::1
const options = {
key: fs.readFileSync('localhost+2-key.pem'),
cert: fs.readFileSync('localhost+2.pem'),
};
const server = http2.createSecureServer(options, (req, res) => {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<h1>Hello from Node.js HTTP/2!</h1>\n');
setTimeout(() => {
res.addTrailers({'Server-Timing': `sql-1;desc="MySQL lookup Server";dur=100,sql-2;dur=900;desc="MySQL shard Server #1"`});
res.end();
});
});
server.listen(8443, () => console.log('https://localhost:8443'));
@brandonsturgeon
Copy link

Nice job!

@paulirish
Copy link
Author

paulirish commented Apr 19, 2017 •
edited
Loading

:D

image

@paulirish
Copy link
Author

updated for the latest version of the spec.

@farnulfo
Copy link

Using httpbin.org:
https://httpbin.org/response-headers?Server=httpbin&Content-Type=text%2Fplain%3B+charset%3DUTF-8&Server-Timing=sql-1%3Bdesc%3D%22MySQL%20lookup%20Server%22%3Bdur%3D100%2Csql-2%3Bdur%3D900%3Bdesc%3D%22MySQL%20shard%20Server%20%231%22%2Cfs%3Bdur%3D600%3Bdesc%3D%22FileSystem%22%2Ccache%3Bdur%3D300%3Bdesc%3D%22Cache%22%2Cother%3Bdur%3D200%3Bdesc%3D%22Database%20Write%22%2Cother%3Bdur%3D110%3Bdesc%3D%22Database%20Read%22%2Ccpu%3Bdur%3D1230%3Bdesc%3D%22Total%20CPU%22

@chkal
Copy link

chkal commented Mar 11, 2018

Does Chrome implement the latest version of the spec or the format from the original tweet?

@chkal
Copy link

chkal commented Mar 11, 2018

Answering my own question: Chrome 65 supports the latest version of the spec (new header format as shows in this gist), Chrome 64 just the old header format.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment