Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Draft][Transition Tracing] More Accurate End Time #25105

Merged
merged 4 commits into from
Sep 13, 2022
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/react-art/src/ReactARTHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -451,3 +451,7 @@ export function preparePortalMount(portalInstance: any): void {
export function detachDeletedInstance(node: Instance): void {
// noop
}

export function requestPostPaintCallback(callback: (time: number) => void) {
// noop
}
11 changes: 10 additions & 1 deletion packages/react-dom/src/client/ReactDOMHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,10 @@ export const cancelTimeout: any =
typeof clearTimeout === 'function' ? clearTimeout : (undefined: any);
export const noTimeout = -1;
const localPromise = typeof Promise === 'function' ? Promise : undefined;

const localRequestAnimationFrame =
typeof requestAnimationFrame === 'function'
? requestAnimationFrame
: scheduleTimeout;
// -------------------
// Microtasks
// -------------------
Expand Down Expand Up @@ -1379,3 +1382,9 @@ export function setupIntersectionObserver(
},
};
}

export function requestPostPaintCallback(callback: (time: number) => void) {
localRequestAnimationFrame(() => {
localRequestAnimationFrame(time => callback(time));
});
}
4 changes: 4 additions & 0 deletions packages/react-native-renderer/src/ReactFabricHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -609,3 +609,7 @@ export function preparePortalMount(portalInstance: Instance): void {
export function detachDeletedInstance(node: Instance): void {
// noop
}

export function requestPostPaintCallback(callback: (time: number) => void) {
// noop
}
4 changes: 4 additions & 0 deletions packages/react-native-renderer/src/ReactNativeHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -510,3 +510,7 @@ export function preparePortalMount(portalInstance: Instance): void {
export function detachDeletedInstance(node: Instance): void {
// noop
}

export function requestPostPaintCallback(callback: (time: number) => void) {
// noop
}
5 changes: 5 additions & 0 deletions packages/react-noop-renderer/src/createReactNoop.js
Original file line number Diff line number Diff line change
Expand Up @@ -473,6 +473,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
logRecoverableError() {
// no-op
},

requestPostPaintCallback(callback) {
const endTime = Scheduler.unstable_now();
callback(endTime);
},
};

const hostConfig = useMutation
Expand Down
55 changes: 40 additions & 15 deletions packages/react-reconciler/src/ReactFiberWorkLoop.new.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ import {
supportsMicrotasks,
errorHydratingContainer,
scheduleMicrotask,
requestPostPaintCallback,
} from './ReactFiberHostConfig';

import {
Expand Down Expand Up @@ -360,6 +361,7 @@ export function getWorkInProgressTransitions() {
}

let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
let currentEndTime: number | null = null;

export function addTransitionStartCallbackToPendingTransition(
transition: Transition,
Expand Down Expand Up @@ -2639,6 +2641,36 @@ function commitRootImpl(
markCommitStopped();
}

if (enableTransitionTracing) {
// We process transitions during passive effects. However, passive effects can be
// processed synchronously during the commit phase as well as asynchronously after
// paint. At the end of the commit phase, we schedule a callback that will be called
// after the next paint. If the transitions have already been processed (passive
// effect phase happened synchronously), we will schedule a callback to process
// the transitions. However, if we don't have any pending transition callbacks, this
// means that the transitions have yet to be processed (passive effects processed after paint)
// so we will store the end time of paint so that we can process the transitions
// and then call the callback via the correct end time.
const prevRootTransitionCallbacks = root.transitionCallbacks;
if (prevRootTransitionCallbacks !== null) {
requestPostPaintCallback(endTime => {
const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
if (prevPendingTransitionCallbacks !== null) {
currentPendingTransitionCallbacks = null;
scheduleCallback(IdleSchedulerPriority, () => {
processTransitionCallbacks(
prevPendingTransitionCallbacks,
endTime,
prevRootTransitionCallbacks,
);
});
} else {
currentEndTime = endTime;
}
});
}
}

return null;
}

Expand Down Expand Up @@ -2780,28 +2812,21 @@ function flushPassiveEffectsImpl() {
if (enableTransitionTracing) {
const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
const prevRootTransitionCallbacks = root.transitionCallbacks;
const prevEndTime = currentEndTime;
if (
prevPendingTransitionCallbacks !== null &&
prevRootTransitionCallbacks !== null
prevRootTransitionCallbacks !== null &&
prevEndTime !== null
) {
// TODO(luna) Refactor this code into the Host Config
// TODO(luna) The end time here is not necessarily accurate
// because passive effects could be called before paint
// (synchronously) or after paint (normally). We need
// to come up with a way to get the correct end time for both cases.
// One solution is in the host config, if the passive effects
// have not yet been run, make a call to flush the passive effects
// right after paint.
const endTime = now();
currentPendingTransitionCallbacks = null;

scheduleCallback(IdleSchedulerPriority, () =>
currentEndTime = null;
scheduleCallback(IdleSchedulerPriority, () => {
processTransitionCallbacks(
prevPendingTransitionCallbacks,
endTime,
prevEndTime,
prevRootTransitionCallbacks,
),
);
);
});
}
}

Expand Down
55 changes: 40 additions & 15 deletions packages/react-reconciler/src/ReactFiberWorkLoop.old.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ import {
supportsMicrotasks,
errorHydratingContainer,
scheduleMicrotask,
requestPostPaintCallback,
} from './ReactFiberHostConfig';

import {
Expand Down Expand Up @@ -360,6 +361,7 @@ export function getWorkInProgressTransitions() {
}

let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
let currentEndTime: number | null = null;

export function addTransitionStartCallbackToPendingTransition(
transition: Transition,
Expand Down Expand Up @@ -2639,6 +2641,36 @@ function commitRootImpl(
markCommitStopped();
}

if (enableTransitionTracing) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move in another module maybe

// We process transitions during passive effects. However, passive effects can be
// processed synchronously during the commit phase as well as asynchronously after
// paint. At the end of the commit phase, we schedule a callback that will be called
// after the next paint. If the transitions have already been processed (passive
// effect phase happened synchronously), we will schedule a callback to process
// the transitions. However, if we don't have any pending transition callbacks, this
// means that the transitions have yet to be processed (passive effects processed after paint)
// so we will store the end time of paint so that we can process the transitions
// and then call the callback via the correct end time.
const prevRootTransitionCallbacks = root.transitionCallbacks;
if (prevRootTransitionCallbacks !== null) {
requestPostPaintCallback(endTime => {
const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
if (prevPendingTransitionCallbacks !== null) {
currentPendingTransitionCallbacks = null;
scheduleCallback(IdleSchedulerPriority, () => {
processTransitionCallbacks(
prevPendingTransitionCallbacks,
endTime,
prevRootTransitionCallbacks,
);
});
} else {
currentEndTime = endTime;
}
});
}
}

return null;
}

Expand Down Expand Up @@ -2780,28 +2812,21 @@ function flushPassiveEffectsImpl() {
if (enableTransitionTracing) {
const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
const prevRootTransitionCallbacks = root.transitionCallbacks;
const prevEndTime = currentEndTime;
if (
prevPendingTransitionCallbacks !== null &&
prevRootTransitionCallbacks !== null
prevRootTransitionCallbacks !== null &&
prevEndTime !== null
) {
// TODO(luna) Refactor this code into the Host Config
// TODO(luna) The end time here is not necessarily accurate
// because passive effects could be called before paint
// (synchronously) or after paint (normally). We need
// to come up with a way to get the correct end time for both cases.
// One solution is in the host config, if the passive effects
// have not yet been run, make a call to flush the passive effects
// right after paint.
const endTime = now();
currentPendingTransitionCallbacks = null;

scheduleCallback(IdleSchedulerPriority, () =>
currentEndTime = null;
scheduleCallback(IdleSchedulerPriority, () => {
processTransitionCallbacks(
prevPendingTransitionCallbacks,
endTime,
prevEndTime,
prevRootTransitionCallbacks,
),
);
);
});
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ describe('ReactFiberHostContext', () => {
return DefaultEventPriority;
},
supportsMutation: true,
requestPostPaintCallback: function() {},
});

const container = Renderer.createContainer(
Expand Down Expand Up @@ -129,6 +130,7 @@ describe('ReactFiberHostContext', () => {
getCurrentEventPriority: function() {
return DefaultEventPriority;
},
requestPostPaintCallback: function() {},
supportsMutation: true,
});

Expand Down
Loading