PerformanceResourceTiming.contentType - add docs (mdn#35235)

* PerformanceResourceTimeing.contentType - add docs

* Make it more clear that content type is not same as mime type of file in some cases

* Update files/en-us/web/api/performanceresourcetiming/contenttype/index.md

---------

Co-authored-by: sideshowbarker <[email protected]>

Author: hamishwillee

files/en-us/web/api/performanceresourcetiming/contenttype/index.md

@@ -0,0 +1,70 @@
+---
+title: "PerformanceResourceTiming: contentType property"
+short-title: contentType
+slug: Web/API/PerformanceResourceTiming/contentType
+page-type: web-api-instance-property
+browser-compat: api.PerformanceResourceTiming.contentType
+---
+
+{{APIRef("Performance API")}}
+
+The **`contentType`** read-only property of the {{domxref("PerformanceResourceTiming")}} interface is a string indicating the content type of the fetched resource, formatted as a {{glossary("MIME type")}} and subtype separated by a forward slash.
+
+The content type is a minimized and "standardized" version of the MIME type that is extracted from the {{httpheader("Content-Type")}} HTTP header sent in the resource's fetch response.
+For JavaScript, JSON, SVG, and XML, the MIME type is replaced by a representative MIME type/subtype string.
+Other types supported by the browser are represented by the MIME type/subtype string in the header (other information in the header is discarded).
+
+## Value
+
+A string indicating the MIME type "essence" of the content.
+This may be one of the following values:
+
+- `text/javascript`
+  - : JavaScript content.
+- `application/json`
+  - : JSON content.
+- `image/svg+xml`
+  - : SVG content.
+- `application/xml`
+  - : XML content (other than SVG).
+- MIME type/subtype
+  - : Any other MIME type/subtype supported by the user agent.
+- `""` (empty string)
+  - : Returned for MIME types that are not supported by the browser, or if the resource fetch failed due to [CORS](/en-US/docs/Web/HTTP/CORS) checks.
+
+## Examples
+
+### Filtering resources
+
+The `contentType` property can be used to get specific resource timing entries only; for example, only those related to scripts.
+
+The following example uses a {{domxref("PerformanceObserver")}} to notify of new `resource` performance entries as they are recorded in the browser's performance timeline.
+The `buffered` option is used for accessing entries from before the observer creation.
+
+```js
+const observer = new PerformanceObserver((list) => {
+  const javascriptResources = list.getEntries().filter((entry) => {
+    return entry.contentType === "text/javascript";
+  });
+  console.log(javascriptResources);
+});
+
+observer.observe({ type: "resource", buffered: true });
+```
+
+The following example uses {{domxref("Performance.getEntriesByType()")}}, which only shows `resource` performance entries present in the browser's performance timeline at the time you call the method.
+
+```js
+const scripts = performance.getEntriesByType("resource").filter((entry) => {
+  return entry.contentType === "text/javascript";
+});
+console.log(scripts);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/performanceresourcetiming/index.md

@@ -84,8 +84,12 @@ The interface supports the following timestamp properties which you can see in t
 
 Additionally, this interface exposes the following properties containing more information about a resource:
 
+- {{domxref("PerformanceResourceTiming.contentType")}} {{ReadOnlyInline}}
+  - : A string representing a minimized and standardized version of the MIME-type of the fetched resource.
 - {{domxref('PerformanceResourceTiming.decodedBodySize')}} {{ReadOnlyInline}}
   - : A number that is the size (in octets) received from the fetch (HTTP or cache) of the message body, after removing any applied content encoding.
+- {{domxref("PerformanceResourceTiming.deliveryType")}} {{experimental_inline}} {{ReadOnlyInline}}
+  - : Indicates how the resource was delivered — for example from the cache or from a navigational prefetch.
 - {{domxref('PerformanceResourceTiming.encodedBodySize')}} {{ReadOnlyInline}}
   - : A number representing the size (in octets) received from the fetch (HTTP or cache), of the payload body, before removing any applied content encodings.
 - {{domxref('PerformanceResourceTiming.initiatorType')}} {{ReadOnlyInline}}
@@ -100,8 +104,6 @@ Additionally, this interface exposes the following properties containing more in
   - : A number representing the size (in octets) of the fetched resource. The size includes the response header fields plus the response payload body.
 - {{domxref('PerformanceResourceTiming.serverTiming')}} {{ReadOnlyInline}}
   - : An array of {{domxref("PerformanceServerTiming")}} entries containing server timing metrics.
-- {{domxref("PerformanceResourceTiming.deliveryType")}} {{experimental_inline}} {{ReadOnlyInline}}
-  - : Indicates how the resource was delivered — for example from the cache or from a navigational prefetch.
 
 ## Instance methods