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.

Sign up for GitHub

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

[WIP] Add requestIdleCallback polyfill package #12253

Closed
wants to merge 14 commits into from
Closed

[WIP] Add requestIdleCallback polyfill package #12253

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
11f6b72
Create request-idle-callback-polyfill package
Feb 15, 2018
09ec46e
Add some spec-defined types
Feb 16, 2018
882ab49
Rename local variables to be consistent with spec
Feb 16, 2018
fe28f0a
Recreate frameDeadlineObj every time a callback is called
Feb 16, 2018
4a5134f
Add support for scheduling multiple callbacks
Feb 16, 2018
f1be277
Use setTimeout to call timed out callbacks
Feb 20, 2018
7bae7f8
Implement test suite
Feb 20, 2018
c6cb758
Run prettier
Feb 20, 2018
1a0d25f
Remove scheduledRICCallback
Feb 20, 2018
18a57f4
Remove assertions from mock idle callback
Feb 21, 2018
299737d
Export a PROD and DEV build
Feb 21, 2018
cd1bfc7
Include cjs/ in package.json file
Feb 21, 2018
96e1156
Lazily register message listener
Feb 21, 2018
b3a5223
Use request-idle-callback polyfill in ReactDOMFrameScheduling
Feb 21, 2018
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
Prev Previous commit
Next Next commit
Add support for scheduling multiple callbacks
  • Loading branch information
Brandon Dail committed Feb 20, 2018
commit 4a5134f4be6b728de5537f88f624592819fb3343
213 changes: 113 additions & 100 deletions packages/request-idle-callback-polyfill/src/RequestIdleCallback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,71 +22,89 @@ export type IdleDeadline = {

type IdleRequestOptions = {
timeout: number,
}

type IdleRequestCallback = (IdleDeadline) => void;
};

type IdleRequestCallback = IdleDeadline => void;

const hasNativePerformanceNow =
typeof performance === 'object' && typeof performance.now === 'function';

let now;
if (hasNativePerformanceNow) {
now = function() {
now = function () {
return performance.now();
};
} else {
now = function() {
now = function () {
return Date.now();
};
}

let lastIdlePeriodDeadline = 0;

let scheduledRICCallback = null;
let isIdleScheduled = false;
let timeoutTime = -1;
function IdleDeadlineImpl(deadline : number, didTimeout: boolean) {
this._deadline = deadline;
this.didTimeout = didTimeout;
};

let isAnimationFrameScheduled = false;
IdleDeadlineImpl.prototype.timeRemaining = function() {
// If the callback timed out there's definitely no time remaining
if (this.didTimeout) {
return 0;
}
// We assume that if we have a performance timer that the rAF callback
// gets a performance timer value. Not sure if this is always true.
const remaining = this._deadline - now();
return remaining > 0 ? remaining : 0;
}

let frameDeadline = 0;
// 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 previousFrameTime = 33;
let activeFrameTime = 33;

const idleCallbacks: Array<null | IdleRequestCallback> = [];
const idleCallbackTimeouts : Array<null | number> = [];
let idleCallbackIdentifier = 0;
let currentIdleCallbackHandle = 0;
let lastIdlePeriodDeadline = 0;

function timeRemaining() {
// We assume that if we have a performance timer that the rAF callback
// gets a performance timer value. Not sure if this is always true.
const remaining = lastIdlePeriodDeadline - now();
return remaining > 0 ? remaining : 0;
let scheduledRICCallback = null;
let isIdleScheduled = false;

let isAnimationFrameScheduled = false;
// 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 previousFrameTime = 33;
let activeFrameTime = 33;

// We use the postMessage trick to defer idle work until after the repaint.
const messageKey =
'__reactIdleCallback$' +
Math.random()
.toString(36)
.slice(2);

const idleTick = function (event) {
if (event.source !== window || event.data !== messageKey) {
return;
}

// We use the postMessage trick to defer idle work until after the repaint.
const messageKey =
'__reactIdleCallback$' +
Math.random()
.toString(36)
.slice(2);

const idleTick = function(event) {
if (event.source !== window || event.data !== messageKey) {
return;
isIdleScheduled = false;
// While there are still callbacks in the queue...
while (currentIdleCallbackHandle < idleCallbacks.length) {
// Get the callback and the timeout, if it exists
const timeoutTime = idleCallbackTimeouts[currentIdleCallbackHandle];
const callback = idleCallbacks[currentIdleCallbackHandle];
// This callback might have been cancelled, continue to check the rest of the queue
if (!callback) {
currentIdleCallbackHandle++;
continue;
}

isIdleScheduled = false;
let didTimeout = false;

const currentTime = now();
if (lastIdlePeriodDeadline - currentTime <= 0) {
let didTimeout = false;
if (lastIdlePeriodDeadline - currentTime <= 0) {
// There's no time left in this idle period. Check if the callback has
// a timeout and whether it's been exceeded.
if (timeoutTime !== -1 && timeoutTime <= currentTime) {
if (timeoutTime != null && timeoutTime <= currentTime) {
// Exceeded the timeout. Invoke the callback even though there's no
// time left.
didTimeout = true;
didTimeout = true;
} else {
// No timeout.
if (!isAnimationFrameScheduled) {
Expand All @@ -99,74 +117,69 @@ function timeRemaining() {
}
} else {
// There's still time left in this idle period.
didTimeout = false;
didTimeout = false;
}

timeoutTime = -1;
const callback = scheduledRICCallback;
scheduledRICCallback = null;
if (callback !== null) {
callback({didTimeout, timeRemaining});
}
};
// Assumes that we have addEventListener in this environment. Might need
// something better for old IE.
window.addEventListener('message', idleTick, false);
currentIdleCallbackHandle++;
callback(new IdleDeadlineImpl(lastIdlePeriodDeadline, didTimeout));
}
};
// Assumes that we have addEventListener in this environment. Might need
// something better for old IE.
window.addEventListener('message', idleTick, false);

function animationTick(rafTime: number) {
isAnimationFrameScheduled = false;
isAnimationFrameScheduled = false;
let nextFrameTime = rafTime - lastIdlePeriodDeadline + activeFrameTime;
if (
nextFrameTime < activeFrameTime &&
previousFrameTime < activeFrameTime
) {
if (nextFrameTime < 8) {
// Defensive coding. We don't support higher frame rates than 120hz.
// If we get lower than that, it is probably a bug.
nextFrameTime = 8;
}
// If one frame goes long, then the next one can be short to catch up.
// If two frames are short in a row, then that's an indication that we
// actually have a higher frame rate than what we're currently optimizing.
// We adjust our heuristic dynamically accordingly. For example, if we're
// running on 120hz display or 90hz VR display.
// Take the max of the two in case one of them was an anomaly due to
// missed frame deadlines.
activeFrameTime =
nextFrameTime < previousFrameTime ? previousFrameTime : nextFrameTime;
} else {
previousFrameTime = nextFrameTime;
if (nextFrameTime < activeFrameTime && previousFrameTime < activeFrameTime) {
if (nextFrameTime < 8) {
// Defensive coding. We don't support higher frame rates than 120hz.
// If we get lower than that, it is probably a bug.
nextFrameTime = 8;
}
// If one frame goes long, then the next one can be short to catch up.
// If two frames are short in a row, then that's an indication that we
// actually have a higher frame rate than what we're currently optimizing.
// We adjust our heuristic dynamically accordingly. For example, if we're
// running on 120hz display or 90hz VR display.
// Take the max of the two in case one of them was an anomaly due to
// missed frame deadlines.
activeFrameTime =
nextFrameTime < previousFrameTime ? previousFrameTime : nextFrameTime;
} else {
previousFrameTime = nextFrameTime;
}
lastIdlePeriodDeadline = rafTime + activeFrameTime;
if (!isIdleScheduled) {
isIdleScheduled = true;
window.postMessage(messageKey, '*');
}
};
if (!isIdleScheduled) {
isIdleScheduled = true;
window.postMessage(messageKey, '*');
}
}

export function requestIdleCallback(
export function requestIdleCallback(
callback: IdleRequestCallback,
options?: IdleRequestOptions,
): number {
// This assumes that we only schedule one callback at a time because that's
// how Fiber uses it.
scheduledRICCallback = callback;
if (options != null && typeof options.timeout === 'number') {
timeoutTime = now() + options.timeout;
}
if (!isAnimationFrameScheduled) {
// If rAF didn't already schedule one, we need to schedule a frame.
// TODO: If this rAF doesn't materialize because the browser throttles, we
// might want to still have setTimeout trigger rIC as a backup to ensure
// that we keep performing work.
isAnimationFrameScheduled = true;
requestAnimationFrame(animationTick);
}
return 0;
};
): number {
scheduledRICCallback = callback;
const handle = idleCallbackIdentifier++;
idleCallbacks[handle] = callback;

export function cancelIdleCallback() {
scheduledRICCallback = null;
isIdleScheduled = false;
timeoutTime = -1;
};
if (options != null && typeof options.timeout === 'number') {
idleCallbackTimeouts[handle] = now() + options.timeout;
}
if (!isAnimationFrameScheduled) {
// If rAF didn't already schedule one, we need to schedule a frame.
// TODO: If this rAF doesn't materialize because the browser throttles, we
// might want to still have setTimeout trigger rIC as a backup to ensure
// that we keep performing work.
isAnimationFrameScheduled = true;
requestAnimationFrame(animationTick);
}
return 0;
}

export function cancelIdleCallback(handle: number) {
idleCallbacks[handle] = null;
idleCallbackTimeouts[handle] = null;
// @TODO this isn't true if there are still scheduled callbacks in the queue
isIdleScheduled = false;
}