PerformanceResourceTiming: nextHopProtocol property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
Note: This feature is available in Web Workers.
The nextHopProtocol
read-only property is a string representing the network protocol used to fetch the resource, as identified by the ALPN Protocol ID (RFC7301).
When a proxy is used, if a tunnel connection is established, this property returns the ALPN Protocol ID of the tunneled protocol. Otherwise, this property returns the ALPN Protocol ID of the first hop to the proxy.
Value
The nextHopProtocol
property can have the following values:
- A string representing the network protocol used to fetch the resource, as identified by the ALPN Protocol ID (RFC7301). Typical values are:
"http/0.9"
"http/1.0"
"http/1.1"
"h2"
"h2c"
"h3"
- An empty string if the resource is a cross-origin request and no
Timing-Allow-Origin
HTTP response header is used.
Examples
Logging resources that use neither HTTP/2 nor HTTP/3
The nextHopProtocol
property can be used to see resources that don't use the HTTP/2 or HTTP/3 protocols.
Example using a PerformanceObserver
, which notifies of new 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.
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const protocol = entry.nextHopProtocol;
if (protocol && !(protocol === "h2" || protocol === "h3")) {
console.log(`${entry.name} uses ${protocol}.`);
}
});
});
observer.observe({ type: "resource", buffered: true });
Example using Performance.getEntriesByType()
, which only shows resource
performance entries present in the browser's performance timeline at the time you call this method:
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
const protocol = entry.nextHopProtocol;
if (protocol && !(protocol === "h2" || protocol === "h3")) {
console.log(`${entry.name} uses ${protocol}.`);
}
});
Cross-origin network protocol information
If the value of the nextHopProtocol
property is an empty string, the resource might be a cross-origin request. To expose cross-origin network protocol information, the Timing-Allow-Origin
HTTP response header needs to be set.
For example, to allow https://developer.mozilla.org
to see network protocol information, the cross-origin resource should send:
Timing-Allow-Origin: https://developer.mozilla.org
Specifications
Specification |
---|
Resource Timing # dom-performanceresourcetiming-nexthopprotocol |
Browser compatibility
BCD tables only load in the browser