diff --git a/files/en-us/web/api/performanceresourcetiming/index.md b/files/en-us/web/api/performanceresourcetiming/index.md index 24e8c19ef78fbc2..f7aee5421395cfc 100644 --- a/files/en-us/web/api/performanceresourcetiming/index.md +++ b/files/en-us/web/api/performanceresourcetiming/index.md @@ -61,6 +61,8 @@ The interface also supports the following properties which are listed in the ord - : A {{domxref("DOMHighResTimeStamp")}} immediately before the browser starts requesting the resource from the server. - {{domxref('PerformanceResourceTiming.responseStart')}} {{ReadOnlyInline}} - : A {{domxref("DOMHighResTimeStamp")}} immediately after the browser receives the first byte of the response from the server. +- {{domxref('PerformanceResourceTiming.responseStatus')}} {{experimental_inline}} {{ReadOnlyInline}} + - : A number representing the HTTP response status code returned when fetching the resource. - {{domxref('PerformanceResourceTiming.responseEnd')}} {{ReadOnlyInline}} - : A {{domxref("DOMHighResTimeStamp")}} immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first. - {{domxref('PerformanceResourceTiming.transferSize')}} {{ReadOnlyInline}} diff --git a/files/en-us/web/api/performanceresourcetiming/responsestatus/index.md b/files/en-us/web/api/performanceresourcetiming/responsestatus/index.md new file mode 100644 index 000000000000000..754f13d92641ed1 --- /dev/null +++ b/files/en-us/web/api/performanceresourcetiming/responsestatus/index.md @@ -0,0 +1,83 @@ +--- +title: PerformanceResourceTiming.responseStatus +slug: Web/API/PerformanceResourceTiming/responseStatus +page-type: web-api-instance-property +tags: + - API + - Property + - Reference + - Web Performance + - Experimental +browser-compat: api.PerformanceResourceTiming.responseStatus +--- + +{{APIRef("Performance API")}} {{SeeCompatTable}} + +The **`responseStatus`** read-only property represents the HTTP response status code returned when fetching the resource. + +This property maps to {{domxref("Response.status")}} from the [Fetch API](/en-US/docs/Web/API/Fetch_API). + +## Value + +The `responseStatus` property can have the following values: + +- A number indicating the [HTTP response status code](/en-US/docs/Web/HTTP/Status) returned when fetching the resource. +- `0` if the [CORS](/en-US/docs/Web/HTTP/CORS) check fails. +- `0` for cross-origin {{HTMLElement("iframe")}} objects. + +## Examples + +### Checking if a cache was hit + +The `responseStatus` property can be used to check for cached resources with a {{HTTPStatus("304")}} `Not Modified` response status code. + +Using a {{domxref("PerformanceObserver")}}: + +```js +const observer = new PerformanceObserver((list) => { + list.getEntries().forEach((entry) => { + if (entry.responseStatus === 304) { + console.log(`${entry.name} was loaded from cache`); + } + }); +}); + +observer.observe({ type: "resource", buffered: true }); +``` + +Or using {{domxref("Performance.getEntriesByType()")}}, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method: + +```js +const resources = performance.getEntriesByType("resource"); +resources.forEach((entry) => { + if (entry.responseStatus === 304) { + console.log(`${entry.name} was loaded from cache`); + } +}); +``` + +Alternatively, if `responseStatus` is not available, you can check if the {{domxref("PerformanceResourceTiming.transferSize", "transferSize")}} property returned `0`. + +### Cross-origin response status codes + +If the value of the `responseStatus` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin response status codes, the [CORS](/en-US/docs/Web/HTTP/CORS) {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP response header needs to be set. + +For example, to allow `https://developer.mozilla.org` to see response status codes, the cross-origin resource should send: + +```http +Access-Control-Allow-Origin: https://developer.mozilla.org +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [HTTP response status code](/en-US/docs/Web/HTTP/Status) +- {{domxref("Response.status")}} +- [CORS](/en-US/docs/Web/HTTP/CORS) diff --git a/files/en-us/web/api/performanceresourcetiming/tojson/index.md b/files/en-us/web/api/performanceresourcetiming/tojson/index.md index 4f548c15872525e..cc763b57596dda6 100644 --- a/files/en-us/web/api/performanceresourcetiming/tojson/index.md +++ b/files/en-us/web/api/performanceresourcetiming/tojson/index.md @@ -66,6 +66,7 @@ This would log a JSON object like so: "secureConnectionStart": 110.80000001192093, "requestStart": 117.30000001192093, "responseStart": 120.40000000596046, + "responseStatus": 200, "responseEnd": 122.40000000596046, "transferSize": 0, "encodedBodySize": 880,