refactor[react-devtools/fiber/renderer]: optimize durations resolution (#31118)
Stacked on https://github.com/facebook/react/pull/31117. No need for sending long float numbers and to have resolution less than a microsecond, we end up formatting it on a Frontend side: https://github.com/facebook/react/blob/6c7b41da3de12be2d95c60181b3fe896f824f13a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js#L359-L360
Ruslan Lesiutin committed
Oct 9, 2024 at 13:26 UTC
389a2deebc2dc41deb268f4b543709989d688d69
2 files changed
+28
-5
packages/react-devtools-shared/src/backend/fiber/renderer.js
+19
-5
@@ -44,6 +44,7 @@ import {
44
} from 'react-devtools-shared/src/utils';
45
import {
46
formatConsoleArgumentsToSingleString,
47
+ formatDurationToMicrosecondsGranularity,
48
gt,
49
gte,
50
parseSourceFromComponentStack,
@@ -5074,8 +5075,14 @@ export function attach(
5075
const fiberSelfDurations: Array<[number, number]> = [];
5076
for (let i = 0; i < durations.length; i += 3) {
5077
const fiberID = durations[i];
5077
- fiberActualDurations.push([fiberID, durations[i + 1]]);
5078
- fiberSelfDurations.push([fiberID, durations[i + 2]]);
5078
+ fiberActualDurations.push([
5079
+ fiberID,
5080
+ formatDurationToMicrosecondsGranularity(durations[i + 1]),
5081
+ ]);
5082
+ fiberSelfDurations.push([
5083
+ fiberID,
5084
+ formatDurationToMicrosecondsGranularity(durations[i + 2]),
5085
+ ]);
5086
}
5087
5088
commitData.push({
@@ -5083,11 +5090,18 @@ export function attach(
5090
changeDescriptions !== null
5091
? Array.from(changeDescriptions.entries())
5092
: null,
5086
- duration: maxActualDuration,
5087
- effectDuration,
5093
+ duration:
5094
+ formatDurationToMicrosecondsGranularity(maxActualDuration),
5095
+ effectDuration:
5096
+ effectDuration !== null
5097
+ ? formatDurationToMicrosecondsGranularity(effectDuration)
5098
+ : null,
5099
fiberActualDurations,
5100
fiberSelfDurations,
5090
- passiveEffectDuration,
5101
+ passiveEffectDuration:
5102
+ passiveEffectDuration !== null
5103
+ ? formatDurationToMicrosecondsGranularity(passiveEffectDuration)
5104
+ : null,
5105
priorityLevel,
5106
timestamp: commitTime,
5107
updaters,
packages/react-devtools-shared/src/backend/utils/index.js
+9
@@ -331,3 +331,12 @@ export function parseSourceFromComponentStack(
331
332
return parseSourceFromFirefoxStack(componentStack);
333
}
334
+
335
+// 0.123456789 => 0.123
336
+// Expects high-resolution timestamp in milliseconds, like from performance.now()
337
+// Mainly used for optimizing the size of serialized profiling payload
338
+export function formatDurationToMicrosecondsGranularity(
339
+ duration: number,
340
+): number {
341
+ return Math.round(duration * 1000) / 1000;
342
+}