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 perpetuatlly growing the entries buffer.

packages/react-reconciler/src/SchedulingProfiler.js

@@ -20,31 +20,62 @@ 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 (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();
 }
 
 // Create a mark on React initialization
 if (enableSchedulingProfiler) {
-  if (supportsUserTiming) {
-    performance.mark(`--react-init-${ReactVersion}`);
+  if (supportsUserTimingV3) {
+    const name = `--react-init-${ReactVersion}`;
+    performance.mark(name);
+    performance.clearMarks(name);
   }
 }
 
 export function markCommitStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--commit-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      const name = `--commit-start-${formatLanes(lanes)}`;
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
 
 export function markCommitStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--commit-stop');
+    if (supportsUserTimingV3) {
+      const name = '--commit-stop';
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
@@ -63,103 +94,133 @@ 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}`);
+      let name = `--suspense-suspend-${id}-${componentName}`;
+      performance.mark(name);
+      performance.clearMarks(name);
       wakeable.then(
-        () => performance.mark(`--suspense-resolved-${id}-${componentName}`),
-        () => performance.mark(`--suspense-rejected-${id}-${componentName}`),
+        () => {
+          name = `--suspense-resolved-${id}-${componentName}`;
+          performance.mark(name);
+          performance.clearMarks(name);
+        },
+        () => {
+          name = `--suspense-rejected-${id}-${componentName}`;
+          performance.mark(name);
+          performance.clearMarks(name);
+        },
       );
     }
   }
 }
 
 export function markLayoutEffectsStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--layout-effects-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      const name = `--layout-effects-start-${formatLanes(lanes)}`;
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
 
 export function markLayoutEffectsStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--layout-effects-stop');
+    if (supportsUserTimingV3) {
+      const name = '--layout-effects-stop';
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
 
 export function markPassiveEffectsStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--passive-effects-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      const name = `--passive-effects-start-${formatLanes(lanes)}`;
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
 
 export function markPassiveEffectsStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--passive-effects-stop');
+    if (supportsUserTimingV3) {
+      const name = '--passive-effects-stop';
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
 
 export function markRenderStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--render-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      const name = `--render-start-${formatLanes(lanes)}`;
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
 
 export function markRenderYielded(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--render-yield');
+    if (supportsUserTimingV3) {
+      const name = '--render-yield';
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
 
 export function markRenderStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--render-stop');
+    if (supportsUserTimingV3) {
+      const name = '--render-stop';
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
 
 export function markRenderScheduled(lane: Lane): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--schedule-render-${formatLanes(lane)}`);
+    if (supportsUserTimingV3) {
+      const name = `--schedule-render-${formatLanes(lane)}`;
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
 
 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(
-        `--schedule-forced-update-${formatLanes(lane)}-${componentName}`,
-      );
+      const name = `--schedule-forced-update-${formatLanes(
+        lane,
+      )}-${componentName}`;
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }
 
 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(
-        `--schedule-state-update-${formatLanes(lane)}-${componentName}`,
-      );
+      const name = `--schedule-state-update-${formatLanes(
+        lane,
+      )}-${componentName}`;
+      performance.mark(name);
+      performance.clearMarks(name);
     }
   }
 }