From 7cc5b84ef9e6fd47946c92cfc27ae4f8b93984a5 Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Thu, 25 Jul 2019 16:46:31 -0700 Subject: [PATCH] [scheduler] Yield many times per frame, no rAF Adds experimental flag to yield many times per frame using a message event loop, instead of the current approach of guessing the next vsync and yielding at the end of the frame. This new approach forgoes a `requestAnimationFrame` entirely. It posts a message event and performs a small amount of work (5ms) before yielding to the browser, regardless of where it might be in the vsync cycle. At the end of the event, if there's work left over, it posts another message event. This should keep the main thread responsive even for really high frame rates. It also shouldn't matter if the hardware frame rate changes after page load (our current heuristic only detects if the frame rate increases, not decreases). The main risk is that yielding more often will exacerbate main thread contention with other browser tasks. Let's try it and see. --- .../scheduler/src/SchedulerFeatureFlags.js | 1 + ...t.js => SchedulerBrowser-test.internal.js} | 303 +++++++++++------- .../src/forks/SchedulerFeatureFlags.www.js | 1 + .../src/forks/SchedulerHostConfig.default.js | 177 ++++++---- 4 files changed, 294 insertions(+), 188 deletions(-) rename packages/scheduler/src/__tests__/{SchedulerBrowser-test.js => SchedulerBrowser-test.internal.js} (50%) diff --git a/packages/scheduler/src/SchedulerFeatureFlags.js b/packages/scheduler/src/SchedulerFeatureFlags.js index f63d406933576..60b62662cbf8b 100644 --- a/packages/scheduler/src/SchedulerFeatureFlags.js +++ b/packages/scheduler/src/SchedulerFeatureFlags.js @@ -10,3 +10,4 @@ export const enableSchedulerDebugging = false; export const enableIsInputPending = false; export const requestIdleCallbackBeforeFirstFrame = false; export const requestTimerEventBeforeFirstFrame = false; +export const enableMessageLoopImplementation = false; diff --git a/packages/scheduler/src/__tests__/SchedulerBrowser-test.js b/packages/scheduler/src/__tests__/SchedulerBrowser-test.internal.js similarity index 50% rename from packages/scheduler/src/__tests__/SchedulerBrowser-test.js rename to packages/scheduler/src/__tests__/SchedulerBrowser-test.internal.js index 13907ebcbe0f2..9052ac1532b1e 100644 --- a/packages/scheduler/src/__tests__/SchedulerBrowser-test.js +++ b/packages/scheduler/src/__tests__/SchedulerBrowser-test.internal.js @@ -36,29 +36,32 @@ let NormalPriority; // It also includes Scheduler-specific invariants, e.g. only one rAF callback // can be scheduled at a time. describe('SchedulerBrowser', () => { - beforeEach(() => { - jest.resetModules(); - - // Un-mock scheduler - jest.mock('scheduler', () => require.requireActual('scheduler')); - jest.mock('scheduler/src/SchedulerHostConfig', () => - require.requireActual( - 'scheduler/src/forks/SchedulerHostConfig.default.js', - ), - ); - - runtime = installMockBrowserRuntime(); - performance = window.performance; - Scheduler = require('scheduler'); - scheduleCallback = Scheduler.unstable_scheduleCallback; - NormalPriority = Scheduler.unstable_NormalPriority; - }); + function beforeAndAfterHooks(enableMessageLoopImplementation) { + beforeEach(() => { + jest.resetModules(); + + // Un-mock scheduler + jest.mock('scheduler', () => require.requireActual('scheduler')); + jest.mock('scheduler/src/SchedulerHostConfig', () => + require.requireActual( + 'scheduler/src/forks/SchedulerHostConfig.default.js', + ), + ); + + runtime = installMockBrowserRuntime(); + performance = window.performance; + require('scheduler/src/SchedulerFeatureFlags').enableMessageLoopImplementation = enableMessageLoopImplementation; + Scheduler = require('scheduler'); + scheduleCallback = Scheduler.unstable_scheduleCallback; + NormalPriority = Scheduler.unstable_NormalPriority; + }); - afterEach(() => { - if (!runtime.isLogEmpty()) { - throw Error('Test exited without clearing log.'); - } - }); + afterEach(() => { + if (!runtime.isLogEmpty()) { + throw Error('Test exited without clearing log.'); + } + }); + } function installMockBrowserRuntime() { let VSYNC_INTERVAL = 33.33; @@ -228,89 +231,115 @@ describe('SchedulerBrowser', () => { }; } - it('callback with continuation', () => { - scheduleCallback(NormalPriority, () => { - runtime.log('Task'); - while (!Scheduler.unstable_shouldYield()) { - runtime.advanceTime(1); - } - runtime.log(`Yield at ${performance.now()}ms`); - return () => { - runtime.log('Continuation'); - }; + describe('rAF aligned frame boundaries', () => { + const enableMessageLoopImplementation = false; + beforeAndAfterHooks(enableMessageLoopImplementation); + + it('callback with continuation', () => { + scheduleCallback(NormalPriority, () => { + runtime.log('Task'); + while (!Scheduler.unstable_shouldYield()) { + runtime.advanceTime(1); + } + runtime.log(`Yield at ${performance.now()}ms`); + return () => { + runtime.log('Continuation'); + }; + }); + runtime.assertLog(['Request Animation Frame']); + + runtime.fireAnimationFrame(); + runtime.assertLog([ + 'Animation Frame [0]', + 'Request Animation Frame [Reposted]', + 'Set Timer', + 'Post Message', + ]); + runtime.fireMessageEvent(); + runtime.assertLog(['Message Event', 'Task', 'Yield at 34ms']); + + runtime.fireAnimationFrame(); + runtime.assertLog([ + 'Animation Frame [1]', + 'Request Animation Frame [Reposted]', + 'Set Timer', + 'Post Message', + ]); + + runtime.fireMessageEvent(); + runtime.assertLog(['Message Event', 'Continuation']); + + runtime.advanceTimeToNextFrame(); + runtime.fireAnimationFrame(); + runtime.assertLog(['Animation Frame [2]']); }); - runtime.assertLog(['Request Animation Frame']); - - runtime.fireAnimationFrame(); - runtime.assertLog([ - 'Animation Frame [0]', - 'Request Animation Frame [Reposted]', - 'Set Timer', - 'Post Message', - ]); - runtime.fireMessageEvent(); - runtime.assertLog(['Message Event', 'Task', 'Yield at 34ms']); - - runtime.fireAnimationFrame(); - runtime.assertLog([ - 'Animation Frame [1]', - 'Request Animation Frame [Reposted]', - 'Set Timer', - 'Post Message', - ]); - - runtime.fireMessageEvent(); - runtime.assertLog(['Message Event', 'Continuation']); - - runtime.advanceTimeToNextFrame(); - runtime.fireAnimationFrame(); - runtime.assertLog(['Animation Frame [2]']); - }); - it('two rAF calls in the same frame', () => { - scheduleCallback(NormalPriority, () => runtime.log('A')); - runtime.assertLog(['Request Animation Frame']); - runtime.fireAnimationFrame(); - runtime.assertLog([ - 'Animation Frame [0]', - 'Request Animation Frame [Reposted]', - 'Set Timer', - 'Post Message', - ]); - runtime.fireMessageEvent(); - runtime.assertLog(['Message Event', 'A']); - - // The Scheduler queue is now empty. We're still in frame 0. - expect(runtime.getMostRecentFrameNumber()).toBe(0); - - // Post a task to Scheduler. - scheduleCallback(NormalPriority, () => runtime.log('B')); - - // Did not request another animation frame, since one was already scheduled - // during the previous rAF. - runtime.assertLog([]); - - // Fire the animation frame. - runtime.fireAnimationFrame(); - runtime.assertLog([ - 'Animation Frame [0]', - 'Request Animation Frame [Reposted]', - 'Set Timer', - 'Post Message', - ]); - - runtime.fireMessageEvent(); - runtime.assertLog(['Message Event', 'B']); - }); + it('two rAF calls in the same frame', () => { + scheduleCallback(NormalPriority, () => runtime.log('A')); + runtime.assertLog(['Request Animation Frame']); + runtime.fireAnimationFrame(); + runtime.assertLog([ + 'Animation Frame [0]', + 'Request Animation Frame [Reposted]', + 'Set Timer', + 'Post Message', + ]); + runtime.fireMessageEvent(); + runtime.assertLog(['Message Event', 'A']); + + // The Scheduler queue is now empty. We're still in frame 0. + expect(runtime.getMostRecentFrameNumber()).toBe(0); - it('adjusts frame rate by measuring inteval between rAF events', () => { - runtime.setHardwareFrameRate(60); + // Post a task to Scheduler. + scheduleCallback(NormalPriority, () => runtime.log('B')); - scheduleCallback(NormalPriority, () => runtime.log('Tick')); - runtime.assertLog(['Request Animation Frame']); + // Did not request another animation frame, since one was already scheduled + // during the previous rAF. + runtime.assertLog([]); - // Need to measure two consecutive intervals between frames. - for (let i = 0; i < 2; i++) { + // Fire the animation frame. + runtime.fireAnimationFrame(); + runtime.assertLog([ + 'Animation Frame [0]', + 'Request Animation Frame [Reposted]', + 'Set Timer', + 'Post Message', + ]); + + runtime.fireMessageEvent(); + runtime.assertLog(['Message Event', 'B']); + }); + + it('adjusts frame rate by measuring inteval between rAF events', () => { + runtime.setHardwareFrameRate(60); + + scheduleCallback(NormalPriority, () => runtime.log('Tick')); + runtime.assertLog(['Request Animation Frame']); + + // Need to measure two consecutive intervals between frames. + for (let i = 0; i < 2; i++) { + runtime.fireAnimationFrame(); + runtime.assertLog([ + `Animation Frame [${runtime.getMostRecentFrameNumber()}]`, + 'Request Animation Frame [Reposted]', + 'Set Timer', + 'Post Message', + ]); + runtime.fireMessageEvent(); + runtime.assertLog(['Message Event', 'Tick']); + scheduleCallback(NormalPriority, () => runtime.log('Tick')); + runtime.advanceTimeToNextFrame(); + } + + // Scheduler should observe that it's receiving rAFs every 16.6 ms and + // adjust its frame rate accordingly. Test by blocking the thread until + // Scheduler tells us to yield. Then measure how much time has elapsed. + const start = performance.now(); + scheduleCallback(NormalPriority, () => { + while (!Scheduler.unstable_shouldYield()) { + runtime.advanceTime(1); + } + }); runtime.fireAnimationFrame(); runtime.assertLog([ `Animation Frame [${runtime.getMostRecentFrameNumber()}]`, @@ -320,31 +349,57 @@ describe('SchedulerBrowser', () => { ]); runtime.fireMessageEvent(); runtime.assertLog(['Message Event', 'Tick']); - scheduleCallback(NormalPriority, () => runtime.log('Tick')); - runtime.advanceTimeToNextFrame(); - } + const end = performance.now(); - // Scheduler should observe that it's receiving rAFs every 16.6 ms and - // adjust its frame rate accordingly. Test by blocking the thread until - // Scheduler tells us to yield. Then measure how much time has elapsed. - const start = performance.now(); - scheduleCallback(NormalPriority, () => { - while (!Scheduler.unstable_shouldYield()) { - runtime.advanceTime(1); - } + // Check how much time elapsed in the frame. + expect(end - start).toEqual(17); + }); + }); + + describe('message event loop', () => { + const enableMessageLoopImplementation = true; + beforeAndAfterHooks(enableMessageLoopImplementation); + + it('callback with continutation', () => { + scheduleCallback(NormalPriority, () => { + runtime.log('Task'); + while (!Scheduler.unstable_shouldYield()) { + runtime.advanceTime(1); + } + runtime.log(`Yield at ${performance.now()}ms`); + return () => { + runtime.log('Continuation'); + }; + }); + runtime.assertLog(['Post Message']); + + runtime.fireMessageEvent(); + runtime.assertLog([ + 'Message Event', + 'Task', + 'Yield at 5ms', + 'Post Message', + ]); + + runtime.fireMessageEvent(); + runtime.assertLog(['Message Event', 'Continuation']); + }); + + it('task that throws', () => { + scheduleCallback(NormalPriority, () => { + runtime.log('Oops!'); + throw Error('Oops!'); + }); + scheduleCallback(NormalPriority, () => { + runtime.log('Yay'); + }); + runtime.assertLog(['Post Message']); + + expect(() => runtime.fireMessageEvent()).toThrow('Oops!'); + runtime.assertLog(['Message Event', 'Oops!', 'Post Message']); + + runtime.fireMessageEvent(); + runtime.assertLog(['Message Event', 'Yay']); }); - runtime.fireAnimationFrame(); - runtime.assertLog([ - `Animation Frame [${runtime.getMostRecentFrameNumber()}]`, - 'Request Animation Frame [Reposted]', - 'Set Timer', - 'Post Message', - ]); - runtime.fireMessageEvent(); - runtime.assertLog(['Message Event', 'Tick']); - const end = performance.now(); - - // Check how much time elapsed in the frame. - expect(end - start).toEqual(17); }); }); diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js index a69932ab7a840..06abe7786b1cd 100644 --- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js +++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js @@ -11,4 +11,5 @@ export const { enableSchedulerDebugging, requestIdleCallbackBeforeFirstFrame, requestTimerEventBeforeFirstFrame, + enableMessageLoopImplementation, } = require('SchedulerFeatureFlags'); diff --git a/packages/scheduler/src/forks/SchedulerHostConfig.default.js b/packages/scheduler/src/forks/SchedulerHostConfig.default.js index 9bcb51491e6d5..91d53fcec696a 100644 --- a/packages/scheduler/src/forks/SchedulerHostConfig.default.js +++ b/packages/scheduler/src/forks/SchedulerHostConfig.default.js @@ -9,6 +9,7 @@ import { enableIsInputPending, requestIdleCallbackBeforeFirstFrame as requestIdleCallbackBeforeFirstFrameFlag, requestTimerEventBeforeFirstFrame, + enableMessageLoopImplementation, } from '../SchedulerFeatureFlags'; // The DOM Scheduler implementation is similar to requestIdleCallback. It @@ -116,14 +117,22 @@ if ( : () => Date.now(); let isRAFLoopRunning = false; + let isMessageLoopRunning = false; let scheduledHostCallback = null; let rAFTimeoutID = -1; let taskTimeoutID = -1; - // We start out assuming that we run at 30fps but then the heuristic tracking - // will adjust this value to a faster fps if we get more frequent animation - // frames. - let frameLength = 33.33; + let frameLength = enableMessageLoopImplementation + ? // We won't attempt to align with the vsync. Instead we'll yield multiple + // times per frame, often enough to keep it responsive even at really + // high frame rates > 120. + 5 + : // Use a heuristic to measure the frame rate and yield at the end of the + // frame. We start out assuming that we run at 30fps but then the + // heuristic tracking will adjust this value to a faster fps if we get + // more frequent animation frames. + 33.33; + let prevRAFTime = -1; let prevRAFInterval = -1; let frameDeadline = 0; @@ -199,31 +208,62 @@ if ( }; const performWorkUntilDeadline = () => { - if (scheduledHostCallback !== null) { - const currentTime = getCurrentTime(); - const hasTimeRemaining = frameDeadline - currentTime > 0; - try { - const hasMoreWork = scheduledHostCallback( - hasTimeRemaining, - currentTime, - ); - if (!hasMoreWork) { - scheduledHostCallback = null; + if (enableMessageLoopImplementation) { + if (scheduledHostCallback !== null) { + const currentTime = getCurrentTime(); + // Yield after `frameLength` ms, regardless of where we are in the vsync + // cycle. This means there's always time remaining at the beginning of + // the message event. + frameDeadline = currentTime + frameLength; + const hasTimeRemaining = true; + try { + const hasMoreWork = scheduledHostCallback( + hasTimeRemaining, + currentTime, + ); + if (!hasMoreWork) { + scheduledHostCallback = null; + } else { + // If there's more work, schedule the next message event at the end + // of the preceding one. + port.postMessage(null); + } + } catch (error) { + // If a scheduler task throws, exit the current browser task so the + // error can be observed. + port.postMessage(null); + throw error; + } + } + // Yielding to the browser will give it a chance to paint, so we can + // reset this. + needsPaint = false; + } else { + if (scheduledHostCallback !== null) { + const currentTime = getCurrentTime(); + const hasTimeRemaining = frameDeadline - currentTime > 0; + try { + const hasMoreWork = scheduledHostCallback( + hasTimeRemaining, + currentTime, + ); + if (!hasMoreWork) { + scheduledHostCallback = null; + } + } catch (error) { + // If a scheduler task throws, exit the current browser task so the + // error can be observed, and post a new task as soon as possible + // so we can continue where we left off. + port.postMessage(null); + throw error; } - } catch (error) { - // If a scheduler task throws, exit the current browser task so the - // error can be observed, and post a new task as soon as possible - // so we can continue where we left off. - port.postMessage(null); - throw error; } + // Yielding to the browser will give it a chance to paint, so we can + // reset this. + needsPaint = false; } - // Yielding to the browser will give it a chance to paint, so we can - // reset this. - needsPaint = false; }; - // We use the postMessage trick to defer idle work until after the repaint. const channel = new MessageChannel(); const port = channel.port2; channel.port1.onmessage = performWorkUntilDeadline; @@ -294,57 +334,66 @@ if ( prevRAFTime = rAFTime; frameDeadline = rAFTime + frameLength; + // We use the postMessage trick to defer idle work until after the repaint. port.postMessage(null); }; requestHostCallback = function(callback) { scheduledHostCallback = callback; - if (!isRAFLoopRunning) { - // Start a rAF loop. - isRAFLoopRunning = true; - requestAnimationFrame(rAFTime => { + if (enableMessageLoopImplementation) { + if (!isMessageLoopRunning) { + isMessageLoopRunning = true; + port.postMessage(null); + } + } else { + if (!isRAFLoopRunning) { + // Start a rAF loop. + isRAFLoopRunning = true; + requestAnimationFrame(rAFTime => { + if (requestIdleCallbackBeforeFirstFrame) { + cancelIdleCallback(idleCallbackID); + } + if (requestTimerEventBeforeFirstFrame) { + clearTimeout(idleTimeoutID); + } + onAnimationFrame(rAFTime); + }); + + // If we just missed the last vsync, the next rAF might not happen for + // another frame. To claim as much idle time as possible, post a + // callback with `requestIdleCallback`, which should fire if there's + // idle time left in the frame. + // + // This should only be an issue for the first rAF in the loop; + // subsequent rAFs are scheduled at the beginning of the + // preceding frame. + let idleCallbackID; if (requestIdleCallbackBeforeFirstFrame) { - cancelIdleCallback(idleCallbackID); + idleCallbackID = requestIdleCallback( + function onIdleCallbackBeforeFirstFrame() { + if (requestTimerEventBeforeFirstFrame) { + clearTimeout(idleTimeoutID); + } + frameDeadline = getCurrentTime() + frameLength; + performWorkUntilDeadline(); + }, + ); } + // Alternate strategy to address the same problem. Scheduler a timer + // with no delay. If this fires before the rAF, that likely indicates + // that there's idle time before the next vsync. This isn't always the + // case, but we'll be aggressive and assume it is, as a trade off to + // prevent idle periods. + let idleTimeoutID; if (requestTimerEventBeforeFirstFrame) { - clearTimeout(idleTimeoutID); - } - onAnimationFrame(rAFTime); - }); - - // If we just missed the last vsync, the next rAF might not happen for - // another frame. To claim as much idle time as possible, post a callback - // with `requestIdleCallback`, which should fire if there's idle time left - // in the frame. - // - // This should only be an issue for the first rAF in the loop; subsequent - // rAFs are scheduled at the beginning of the preceding frame. - let idleCallbackID; - if (requestIdleCallbackBeforeFirstFrame) { - idleCallbackID = requestIdleCallback( - function onIdleCallbackBeforeFirstFrame() { - if (requestTimerEventBeforeFirstFrame) { - clearTimeout(idleTimeoutID); + idleTimeoutID = setTimeout(function onTimerEventBeforeFirstFrame() { + if (requestIdleCallbackBeforeFirstFrame) { + cancelIdleCallback(idleCallbackID); } frameDeadline = getCurrentTime() + frameLength; performWorkUntilDeadline(); - }, - ); - } - // Alternate strategy to address the same problem. Scheduler a timer with - // no delay. If this fires before the rAF, that likely indicates that - // there's idle time before the next vsync. This isn't always the case, - // but we'll be aggressive and assume it is, as a trade off to prevent - // idle periods. - let idleTimeoutID; - if (requestTimerEventBeforeFirstFrame) { - idleTimeoutID = setTimeout(function onTimerEventBeforeFirstFrame() { - if (requestIdleCallbackBeforeFirstFrame) { - cancelIdleCallback(idleCallbackID); - } - frameDeadline = getCurrentTime() + frameLength; - performWorkUntilDeadline(); - }, 0); + }, 0); + } } } };