Update scheduling profiler to require User Timing level 3

Browsers that implement User Timing level 2 (e.g. Firefox) apparently struggle to keep up with the number of marks the scheduling profiler is logging. To avoid this, the feature detection has been updated to require User Timing level 3 support. In addition to this, marks are cleared immediately after being logged to avoid perpetually growing the entries buffer.

packages/react-reconciler/src/SchedulingProfiler.js

@@ -20,31 +20,63 @@ import getComponentName from 'shared/getComponentName';
  * require.
  */
 const supportsUserTiming =
-  typeof performance !== 'undefined' && typeof performance.mark === 'function';
+  typeof performance !== 'undefined' &&
+  typeof performance.mark === 'function' &&
+  typeof performance.clearMarks === 'function';
+
+let supportsUserTimingV3 = false;
+if (enableSchedulingProfiler) {
+  if (supportsUserTiming) {
+    const CHECK_V3_MARK = '__v3';
+    const markOptions = {};
+    // $FlowFixMe: Ignore Flow complaining about needing a value
+    Object.defineProperty(markOptions, 'startTime', {
+      get: function() {
+        supportsUserTimingV3 = true;
+        return 0;
+      },
+      set: function() {},
+    });
+
+    try {
+      // $FlowFixMe: Flow expects the User Timing level 2 API.
+      performance.mark(CHECK_V3_MARK, markOptions);
+    } catch (error) {
+      // Ignore
+    } finally {
+      performance.clearMarks(CHECK_V3_MARK);
+    }
+  }
+}
 
 function formatLanes(laneOrLanes: Lane | Lanes): string {
   return ((laneOrLanes: any): number).toString();
 }
 
+function markAndClear(name) {
+  performance.mark(name);
+  performance.clearMarks(name);
+}
+
 // Create a mark on React initialization
 if (enableSchedulingProfiler) {
-  if (supportsUserTiming) {
-    performance.mark(`--react-init-${ReactVersion}`);
+  if (supportsUserTimingV3) {
+    markAndClear(`--react-init-${ReactVersion}`);
   }
 }
 
 export function markCommitStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--commit-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      markAndClear(`--commit-start-${formatLanes(lanes)}`);
     }
   }
 }
 
 export function markCommitStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--commit-stop');
+    if (supportsUserTimingV3) {
+      markAndClear('--commit-stop');
     }
   }
 }
@@ -63,89 +95,89 @@ function getWakeableID(wakeable: Wakeable): number {
 
 export function markComponentSuspended(fiber: Fiber, wakeable: Wakeable): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
+    if (supportsUserTimingV3) {
       const id = getWakeableID(wakeable);
       const componentName = getComponentName(fiber.type) || 'Unknown';
       // TODO Add component stack id
-      performance.mark(`--suspense-suspend-${id}-${componentName}`);
+      markAndClear(`--suspense-suspend-${id}-${componentName}`);
       wakeable.then(
-        () => performance.mark(`--suspense-resolved-${id}-${componentName}`),
-        () => performance.mark(`--suspense-rejected-${id}-${componentName}`),
+        () => markAndClear(`--suspense-resolved-${id}-${componentName}`),
+        () => markAndClear(`--suspense-rejected-${id}-${componentName}`),
       );
     }
   }
 }
 
 export function markLayoutEffectsStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--layout-effects-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      markAndClear(`--layout-effects-start-${formatLanes(lanes)}`);
     }
   }
 }
 
 export function markLayoutEffectsStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--layout-effects-stop');
+    if (supportsUserTimingV3) {
+      markAndClear('--layout-effects-stop');
     }
   }
 }
 
 export function markPassiveEffectsStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--passive-effects-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      markAndClear(`--passive-effects-start-${formatLanes(lanes)}`);
     }
   }
 }
 
 export function markPassiveEffectsStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--passive-effects-stop');
+    if (supportsUserTimingV3) {
+      markAndClear('--passive-effects-stop');
     }
   }
 }
 
 export function markRenderStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--render-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      markAndClear(`--render-start-${formatLanes(lanes)}`);
     }
   }
 }
 
 export function markRenderYielded(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--render-yield');
+    if (supportsUserTimingV3) {
+      markAndClear('--render-yield');
     }
   }
 }
 
 export function markRenderStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--render-stop');
+    if (supportsUserTimingV3) {
+      markAndClear('--render-stop');
     }
   }
 }
 
 export function markRenderScheduled(lane: Lane): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--schedule-render-${formatLanes(lane)}`);
+    if (supportsUserTimingV3) {
+      markAndClear(`--schedule-render-${formatLanes(lane)}`);
     }
   }
 }
 
 export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
+    if (supportsUserTimingV3) {
       const componentName = getComponentName(fiber.type) || 'Unknown';
       // TODO Add component stack id
-      performance.mark(
+      markAndClear(
         `--schedule-forced-update-${formatLanes(lane)}-${componentName}`,
       );
     }
@@ -154,10 +186,10 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
 
 export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
+    if (supportsUserTimingV3) {
       const componentName = getComponentName(fiber.type) || 'Unknown';
       // TODO Add component stack id
-      performance.mark(
+      markAndClear(
         `--schedule-state-update-${formatLanes(lane)}-${componentName}`,
       );
     }