Skip to content

Commit 389a2de

Browse files
authored
refactor[react-devtools/fiber/renderer]: optimize durations resolution (#31118)
Stacked on #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
1 parent dbf80c8 commit 389a2de

File tree

2 files changed

+28
-5
lines changed

2 files changed

+28
-5
lines changed

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

+19-5
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import {
4444
} from 'react-devtools-shared/src/utils';
4545
import {
4646
formatConsoleArgumentsToSingleString,
47+
formatDurationToMicrosecondsGranularity,
4748
gt,
4849
gte,
4950
parseSourceFromComponentStack,
@@ -5074,20 +5075,33 @@ export function attach(
50745075
const fiberSelfDurations: Array<[number, number]> = [];
50755076
for (let i = 0; i < durations.length; i += 3) {
50765077
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+
]);
50795086
}
50805087

50815088
commitData.push({
50825089
changeDescriptions:
50835090
changeDescriptions !== null
50845091
? Array.from(changeDescriptions.entries())
50855092
: null,
5086-
duration: maxActualDuration,
5087-
effectDuration,
5093+
duration:
5094+
formatDurationToMicrosecondsGranularity(maxActualDuration),
5095+
effectDuration:
5096+
effectDuration !== null
5097+
? formatDurationToMicrosecondsGranularity(effectDuration)
5098+
: null,
50885099
fiberActualDurations,
50895100
fiberSelfDurations,
5090-
passiveEffectDuration,
5101+
passiveEffectDuration:
5102+
passiveEffectDuration !== null
5103+
? formatDurationToMicrosecondsGranularity(passiveEffectDuration)
5104+
: null,
50915105
priorityLevel,
50925106
timestamp: commitTime,
50935107
updaters,

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

+9
Original file line numberDiff line numberDiff line change
@@ -331,3 +331,12 @@ export function parseSourceFromComponentStack(
331331

332332
return parseSourceFromFirefoxStack(componentStack);
333333
}
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+
}

0 commit comments

Comments
 (0)