Scheduling profiler tweaks (#20215)

Author: Brian Vaughn

packages/react-reconciler/src/SchedulingProfiler.js

@@ -20,31 +20,63 @@ import getComponentName from 'shared/getComponentName';
  * require.
  */
 constsupportsUserTiming=
-typeofperformance!=='undefined'&&typeofperformance.mark==='function';
+typeofperformance!=='undefined'&&
+typeofperformance.mark==='function'&&
+typeofperformance.clearMarks==='function';
+
+letsupportsUserTimingV3=false;
+if(enableSchedulingProfiler){
+if(supportsUserTiming){
+constCHECK_V3_MARK='__v3';
+constmarkOptions={};
+// $FlowFixMe: Ignore Flow complaining about needing a value
+Object.defineProperty(markOptions,'startTime',{
+get: function(){
+supportsUserTimingV3=true;
+return0;
+},
+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);
+}
+}
+}
 
 functionformatLanes(laneOrLanes: Lane|Lanes): string{
 return((laneOrLanes: any): number).toString();
 }
 
+functionmarkAndClear(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}`);
 }
 }
 
 exportfunctionmarkCommitStarted(lanes: Lanes): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
-performance.mark(`--commit-start-${formatLanes(lanes)}`);
+if(supportsUserTimingV3){
+markAndClear(`--commit-start-${formatLanes(lanes)}`);
 }
 }
 }
 
 exportfunctionmarkCommitStopped(): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
-performance.mark('--commit-stop');
+if(supportsUserTimingV3){
+markAndClear('--commit-stop');
 }
 }
 }
@@ -63,89 +95,89 @@ function getWakeableID(wakeable: Wakeable): number {
 
 exportfunctionmarkComponentSuspended(fiber: Fiber,wakeable: Wakeable): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
+if(supportsUserTimingV3){
 constid=getWakeableID(wakeable);
 constcomponentName=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}`),
 );
 }
 }
 }
 
 exportfunctionmarkLayoutEffectsStarted(lanes: Lanes): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
-performance.mark(`--layout-effects-start-${formatLanes(lanes)}`);
+if(supportsUserTimingV3){
+markAndClear(`--layout-effects-start-${formatLanes(lanes)}`);
 }
 }
 }
 
 exportfunctionmarkLayoutEffectsStopped(): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
-performance.mark('--layout-effects-stop');
+if(supportsUserTimingV3){
+markAndClear('--layout-effects-stop');
 }
 }
 }
 
 exportfunctionmarkPassiveEffectsStarted(lanes: Lanes): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
-performance.mark(`--passive-effects-start-${formatLanes(lanes)}`);
+if(supportsUserTimingV3){
+markAndClear(`--passive-effects-start-${formatLanes(lanes)}`);
 }
 }
 }
 
 exportfunctionmarkPassiveEffectsStopped(): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
-performance.mark('--passive-effects-stop');
+if(supportsUserTimingV3){
+markAndClear('--passive-effects-stop');
 }
 }
 }
 
 exportfunctionmarkRenderStarted(lanes: Lanes): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
-performance.mark(`--render-start-${formatLanes(lanes)}`);
+if(supportsUserTimingV3){
+markAndClear(`--render-start-${formatLanes(lanes)}`);
 }
 }
 }
 
 exportfunctionmarkRenderYielded(): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
-performance.mark('--render-yield');
+if(supportsUserTimingV3){
+markAndClear('--render-yield');
 }
 }
 }
 
 exportfunctionmarkRenderStopped(): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
-performance.mark('--render-stop');
+if(supportsUserTimingV3){
+markAndClear('--render-stop');
 }
 }
 }
 
 exportfunctionmarkRenderScheduled(lane: Lane): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
-performance.mark(`--schedule-render-${formatLanes(lane)}`);
+if(supportsUserTimingV3){
+markAndClear(`--schedule-render-${formatLanes(lane)}`);
 }
 }
 }
 
 exportfunctionmarkForceUpdateScheduled(fiber: Fiber,lane: Lane): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
+if(supportsUserTimingV3){
 constcomponentName=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 {
 
 exportfunctionmarkStateUpdateScheduled(fiber: Fiber,lane: Lane): void{
 if(enableSchedulingProfiler){
-if(supportsUserTiming){
+if(supportsUserTimingV3){
 constcomponentName=getComponentName(fiber.type)||'Unknown';
 // TODO Add component stack id
-performance.mark(
+markAndClear(
 `--schedule-state-update-${formatLanes(lane)}-${componentName}`,
 );
 }