@samitouri / QOS-React-2 / commits / 1345c37941

Mark all lanes in order on every new render (#31615)

This is a hack that ensures that all four lanes as visible whether you have any tracks in them or not, and that they're in the priority order within the Scheduler track group. We do want to show all even if they're not used because it shows what options you're missing out on. <img width="1035" alt="Screenshot 2024-11-22 at 12 38 30 PM" src="https://github.com/user-attachments/assets/f30ab0b9-af5e-48ed-b042-138444352575"> In Chrome, the order of tracks within a group are determined by the earliest start time. We add fake markers at start time zero in that order eagerly. Ideally we could do this only once but because calls that aren't recorded aren't considered for ordering purposes, we need to keep adding these over and over again in case recording has just started. We can't tell when recording starts. Currently performance.mark() are in first insertion order but performance.measure() are in the reverse order. I'm not sure that's intentional. We can always add the 0 time slot even if it's in the past. That's still considered for ordering purposes as long as the measurement is recorded at the time we call it.

Sebastian Markbåge committed Nov 22, 2024 at 13:04 UTC 1345c37941d4e2e29034bb0fc0cfb6d01bb1d841
2 files changed +68 -3
packages/react-reconciler/src/ReactFiberPerformanceTrack.js
+57 -2
@@ -25,7 +25,6 @@ const COMPONENTS_TRACK = 'Components ⚛';
25
26 // Reused to avoid thrashing the GC.
27 const reusableComponentDevToolDetails = {
28 - dataType: 'track-entry',
28 color: 'primary',
29 track: COMPONENTS_TRACK,
30 };
@@ -40,7 +39,6 @@ const reusableComponentOptions = {
39 const LANES_TRACK_GROUP = 'Scheduler ⚛';
40
41 const reusableLaneDevToolDetails = {
43 - dataType: 'track-entry',
42 color: 'primary',
43 track: 'Blocking', // Lane
44 trackGroup: LANES_TRACK_GROUP,
@@ -57,6 +55,63 @@ export function setCurrentTrackFromLanes(lanes: number): void {
55 reusableLaneDevToolDetails.track = getGroupNameOfHighestPriorityLane(lanes);
56 }
57
58 +const blockingLaneMarker = {
59 + startTime: 0,
60 + detail: {
61 + devtools: {
62 + color: 'primary-light',
63 + track: 'Blocking',
64 + trackGroup: LANES_TRACK_GROUP,
65 + },
66 + },
67 +};
68 +
69 +const transitionLaneMarker = {
70 + startTime: 0,
71 + detail: {
72 + devtools: {
73 + color: 'primary-light',
74 + track: 'Transition',
75 + trackGroup: LANES_TRACK_GROUP,
76 + },
77 + },
78 +};
79 +
80 +const suspenseLaneMarker = {
81 + startTime: 0,
82 + detail: {
83 + devtools: {
84 + color: 'primary-light',
85 + track: 'Suspense',
86 + trackGroup: LANES_TRACK_GROUP,
87 + },
88 + },
89 +};
90 +
91 +const idleLaneMarker = {
92 + startTime: 0,
93 + detail: {
94 + devtools: {
95 + color: 'primary-light',
96 + track: 'Idle',
97 + trackGroup: LANES_TRACK_GROUP,
98 + },
99 + },
100 +};
101 +
102 +export function markAllLanesInOrder() {
103 + if (supportsUserTiming) {
104 + // Ensure we create all tracks in priority order. Currently performance.mark() are in
105 + // first insertion order but performance.measure() are in the reverse order. We can
106 + // always add the 0 time slot even if it's in the past. That's still considered for
107 + // ordering.
108 + performance.mark('Blocking Track', blockingLaneMarker);
109 + performance.mark('Transition Track', transitionLaneMarker);
110 + performance.mark('Suspense Track', suspenseLaneMarker);
111 + performance.mark('Idle Track', idleLaneMarker);
112 + }
113 +}
114 +
115 export function logComponentRender(
116 fiber: Fiber,
117 startTime: number,
packages/react-reconciler/src/ReactFiberWorkLoop.js
+11 -1
@@ -82,6 +82,8 @@ import {
82 logYieldTime,
83 logActionYieldTime,
84 logSuspendedYieldTime,
85 + setCurrentTrackFromLanes,
86 + markAllLanesInOrder,
87 } from './ReactFiberPerformanceTrack';
88
89 import {
@@ -271,7 +273,6 @@ import {
273 yieldReason,
274 startPingTimerByLanes,
275 } from './ReactProfilerTimer';
274 -import {setCurrentTrackFromLanes} from './ReactFiberPerformanceTrack';
276
277 // DEV stuff
278 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -1727,6 +1728,15 @@ function finalizeRender(lanes: Lanes, finalizationTime: number): void {
1728
1729 function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
1730 if (enableProfilerTimer && enableComponentPerformanceTrack) {
1731 + // The order of tracks within a group are determined by the earliest start time.
1732 + // Are tracks should show up in priority order and we should ideally always show
1733 + // every track. This is a hack to ensure that we're displaying all tracks in the
1734 + // right order. Ideally we could do this only once but because calls that aren't
1735 + // recorded aren't considered for ordering purposes, we need to keep adding these
1736 + // over and over again in case recording has just started. We can't tell when
1737 + // recording starts.
1738 + markAllLanesInOrder();
1739 +
1740 const previousRenderStartTime = renderStartTime;
1741 // Starting a new render. Log the end of any previous renders and the
1742 // blocked time before the render started.