update feature detection markers to match new standard

Feature detection was added in #747 to allow performance
analysis for nuxt/image uses in aggregate. Since that time,
Javascript-based feature markers have been standardized
in the W3C group around the User Timing API:
https://www.w3.org/TR/user-timing/#dfn-mark_feature_usage

This commit updates the feature tracking to use the new
standard, which is designed to be performance-neutral.
The previous mechanism (the data- attributes) will be
removed in a future PR, once we can confirm it works
as expected end-to-end.

src/runtime/components/nuxt-img.ts

@@ -4,6 +4,7 @@ import { parseSize } from '../utils'
 import { prerenderStaticImages } from '../utils/prerender'
 import { baseImageProps, useBaseImage } from './_base'
 import { useHead, useNuxtApp } from '#imports'
+import { markFeatureUsage } from '../utils/performance'
 
 export const imgProps = {
   ...baseImageProps,
@@ -112,6 +113,8 @@ export default defineComponent({
           placeholderLoaded.value = true
           ctx.emit('load', event)
         }
+
+        markFeatureUsage('nuxt-image')
         return
       }
 

src/runtime/components/nuxt-picture.ts

@@ -4,6 +4,7 @@ import { prerenderStaticImages } from '../utils/prerender'
 import { useBaseImage, baseImageProps } from './_base'
 import { useImage, useHead, useNuxtApp } from '#imports'
 import { getFileExtension } from '#image'
+import { markFeatureUsage } from '../utils/performance'
 
 export const pictureProps = {
   ...baseImageProps,
@@ -95,6 +96,8 @@ export default defineComponent({
       imgEl.value.onload = (event) => {
         ctx.emit('load', event)
       }
+
+      markFeatureUsage('nuxt-picture')
     })
 
     return () =>

src/runtime/utils/performance.ts

@@ -0,0 +1,15 @@
+/**
+ * Feature detection enables us to analyze the performance of nuxt/image
+ * usages and validate performance outcomes (in aggregate only).
+ * 
+ * Javascript-based feature markers have been standardized in the W3C group
+ *  around the User Timing API. See more detail here:
+ * https://www.w3.org/TR/user-timing/#dfn-mark_feature_usage
+ */
+export function markFeatureUsage(featureName: string) {
+  performance?.mark?.('mark_feature_usage', {
+    detail: {
+      feature: featureName
+    }
+  })
+}