refactor[react-devtools/fiber/renderer]: optimize durations resolution

Author: hoxyq

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -44,6 +44,7 @@ import {
 } from 'react-devtools-shared/src/utils';
 import {
   formatConsoleArgumentsToSingleString,
+  formatDurationToMicrosecondsGranularity,
   gt,
   gte,
   parseSourceFromComponentStack,
@@ -5074,20 +5075,30 @@ export function attach(
           const fiberSelfDurations: Array<[number, number]> = [];
           for (let i = 0; i < durations.length; i += 3) {
             const fiberID = durations[i];
-            fiberActualDurations.push([fiberID, durations[i + 1]]);
-            fiberSelfDurations.push([fiberID, durations[i + 2]]);
+            fiberActualDurations.push([
+              fiberID,
+              formatDurationToMicrosecondsGranularity(durations[i + 1]),
+            ]);
+            fiberSelfDurations.push([
+              fiberID,
+              formatDurationToMicrosecondsGranularity(durations[i + 2]),
+            ]);
           }
 
           commitData.push({
             changeDescriptions:
               changeDescriptions !== null
                 ? Array.from(changeDescriptions.entries())
                 : null,
-            duration: maxActualDuration,
-            effectDuration,
+            duration:
+              formatDurationToMicrosecondsGranularity(maxActualDuration),
+            effectDuration:
+              formatDurationToMicrosecondsGranularity(effectDuration),
             fiberActualDurations,
             fiberSelfDurations,
-            passiveEffectDuration,
+            passiveEffectDuration: formatDurationToMicrosecondsGranularity(
+              passiveEffectDuration,
+            ),
             priorityLevel,
             timestamp: commitTime,
             updaters,

packages/react-devtools-shared/src/backend/utils/index.js

@@ -331,3 +331,12 @@ export function parseSourceFromComponentStack(
 
   return parseSourceFromFirefoxStack(componentStack);
 }
+
+// 0.123456789 => 0.123
+// Expects high-resolution timestamp in milliseconds, like from performance.now()
+// Mainly used for optimizing the size of serialized profiling payload
+export function formatDurationToMicrosecondsGranularity(
+  duration: number,
+): number {
+  return Math.round(duration * 1000) / 1000;
+}