Polyfill requestIdleCallback when native is not available (#8833)
I introduce the ReactDOMFrameScheduling module which just exposes rIC and rAF. The polyfill works by scheduling a requestAnimationFrame, store the time for the start of the frame, then schedule a postMessage which gets scheduled after paint. The deadline is set to time + frame rate. By separating the idle call into a separate event tick we ensure that layout, paint and other browser work is counted against the available time. The frame rate is dynamically adjusted by tracking the minimum time between two rAF callbacks. This is not perfect because browsers can schedule multiple callbacks to catch up after a long frame. To compensate for this we only adjust if two consecutive periods are faster than normal. This seems to guarantee that we will hit frame deadlines and we don't end up dropping frames. However, there is still some lost time so we risk starving by not having enough idle time. Especially Firefox seems to have issues keeping up on the triangle demo However, that is also true for native rIC in Firefox. It seems like more render work is scheduled on the main thread pipeline and also that JS execution just generally has more overhead.
Sebastian Markbåge committed
Jan 21, 2017 at 10:27 UTC
5659bd2a6311e70e8aed97e33d92b84e57dd15ca
5 files changed
+158
-7
examples/fiber/index.html
+1
-1
@@ -90,7 +90,7 @@
90
return r;
91
}
92
var newSize = s / 2;
93
- var slowDown = false;
93
+ var slowDown = true;
94
if (slowDown) {
95
var e = performance.now() + 0.8;
96
while (performance.now() < e) {
src/renderers/art/ReactARTFiber.js
+3
-2
@@ -21,6 +21,7 @@ const invariant = require('fbjs/lib/invariant');
21
const emptyObject = require('emptyObject');
22
const React = require('React');
23
const ReactFiberReconciler = require('ReactFiberReconciler');
24
+const ReactDOMFrameScheduling = require('ReactDOMFrameScheduling');
25
26
const { Component } = React;
27
@@ -509,9 +510,9 @@ const ARTRenderer = ReactFiberReconciler({
510
return emptyObject;
511
},
512
512
- scheduleAnimationCallback: window.requestAnimationFrame,
513
+ scheduleAnimationCallback: ReactDOMFrameScheduling.rAF,
514
514
- scheduleDeferredCallback: window.requestIdleCallback,
515
+ scheduleDeferredCallback: ReactDOMFrameScheduling.rIC,
516
517
shouldSetTextContent(props) {
518
return (
src/renderers/dom/fiber/ReactDOMFiber.js
+3
-2
@@ -20,6 +20,7 @@ var ReactControlledComponent = require('ReactControlledComponent');
20
var ReactDOMComponentTree = require('ReactDOMComponentTree');
21
var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
22
var ReactDOMFiberComponent = require('ReactDOMFiberComponent');
23
+var ReactDOMFrameScheduling = require('ReactDOMFrameScheduling');
24
var ReactDOMInjection = require('ReactDOMInjection');
25
var ReactGenericBatching = require('ReactGenericBatching');
26
var ReactFiberReconciler = require('ReactFiberReconciler');
@@ -302,9 +303,9 @@ var DOMRenderer = ReactFiberReconciler({
303
parentInstance.removeChild(child);
304
},
305
305
- scheduleAnimationCallback: window.requestAnimationFrame,
306
+ scheduleAnimationCallback: ReactDOMFrameScheduling.rAF,
307
307
- scheduleDeferredCallback: window.requestIdleCallback,
308
+ scheduleDeferredCallback: ReactDOMFrameScheduling.rIC,
309
310
useSyncScheduling: true,
311
src/renderers/dom/fiber/ReactDOMFrameScheduling.js
new
+149
@@ -0,0 +1,149 @@
1
+/**
2
+ * Copyright 2013-present, Facebook, Inc.
3
+ * All rights reserved.
4
+ *
5
+ * This source code is licensed under the BSD-style license found in the
6
+ * LICENSE file in the root directory of this source tree. An additional grant
7
+ * of patent rights can be found in the PATENTS file in the same directory.
8
+ *
9
+ * @providesModule ReactDOMFrameScheduling
10
+ * @flow
11
+ */
12
+
13
+'use strict';
14
+
15
+// This a built-in polyfill for requestIdleCallback. It works by scheduling
16
+// a requestAnimationFrame, store the time for the start of the frame, then
17
+// schedule a postMessage which gets scheduled after paint. Within the
18
+// postMessage handler do as much work as possible until time + frame rate.
19
+// By separating the idle call into a separate event tick we ensure that
20
+// layout, paint and other browser work is counted against the available time.
21
+// The frame rate is dynamically adjusted.
22
+
23
+import type { Deadline } from 'ReactFiberReconciler';
24
+
25
+var invariant = require('invariant');
26
+
27
+// TODO: There's no way to cancel these, because Fiber doesn't atm.
28
+let rAF : (callback : (time : number) => void) => number;
29
+let rIC : (callback : (deadline : Deadline) => void) => number;
30
+if (typeof requestAnimationFrame !== 'function') {
31
+ invariant(
32
+ false,
33
+ 'React depends on requestAnimationFrame. Make sure that you load a ' +
34
+ 'polyfill in older browsers.'
35
+ );
36
+} else if (typeof requestIdleCallback !== 'function') {
37
+ // Wrap requestAnimationFrame and polyfill requestIdleCallback.
38
+
39
+ var scheduledRAFCallback = null;
40
+ var scheduledRICCallback = null;
41
+
42
+ var isIdleScheduled = false;
43
+ var isAnimationFrameScheduled = false;
44
+
45
+ var frameDeadline = 0;
46
+ // We start out assuming that we run at 30fps but then the heuristic tracking
47
+ // will adjust this value to a faster fps if we get more frequent animation
48
+ // frames.
49
+ var previousFrameTime = 33;
50
+ var activeFrameTime = 33;
51
+
52
+ var frameDeadlineObject = {
53
+ timeRemaining: (
54
+ typeof performance === 'object' &&
55
+ typeof performance.now === 'function' ? function() {
56
+ // We assume that if we have a performance timer that the rAF callback
57
+ // gets a performance timer value. Not sure if this is always true.
58
+ return frameDeadline - performance.now();
59
+ } : function() {
60
+ // As a fallback we use Date.now.
61
+ return frameDeadline - Date.now();
62
+ }
63
+ ),
64
+ };
65
+
66
+ // We use the postMessage trick to defer idle work until after the repaint.
67
+ var messageKey =
68
+ '__reactIdleCallback$' + Math.random().toString(36).slice(2);
69
+ var idleTick = function(event) {
70
+ if (event.source !== window || event.data !== messageKey) {
71
+ return;
72
+ }
73
+ isIdleScheduled = false;
74
+ var callback = scheduledRICCallback;
75
+ scheduledRICCallback = null;
76
+ if (callback) {
77
+ callback(frameDeadlineObject);
78
+ }
79
+ };
80
+ // Assumes that we have addEventListener in this environment. Might need
81
+ // something better for old IE.
82
+ window.addEventListener('message', idleTick, false);
83
+
84
+ var animationTick = function(rafTime) {
85
+ isAnimationFrameScheduled = false;
86
+ var nextFrameTime = rafTime - frameDeadline + activeFrameTime;
87
+ if (nextFrameTime < activeFrameTime && previousFrameTime < activeFrameTime) {
88
+ if (nextFrameTime < 8) {
89
+ // Defensive coding. We don't support higher frame rates than 120hz.
90
+ // If we get lower than that, it is probably a bug.
91
+ nextFrameTime = 8;
92
+ }
93
+ // If one frame goes long, then the next one can be short to catch up.
94
+ // If two frames are short in a row, then that's an indication that we
95
+ // actually have a higher frame rate than what we're currently optimizing.
96
+ // We adjust our heuristic dynamically accordingly. For example, if we're
97
+ // running on 120hz display or 90hz VR display.
98
+ // Take the max of the two in case one of them was an anomaly due to
99
+ // missed frame deadlines.
100
+ activeFrameTime = nextFrameTime < previousFrameTime ?
101
+ previousFrameTime : nextFrameTime;
102
+ } else {
103
+ previousFrameTime = nextFrameTime;
104
+ }
105
+ frameDeadline = rafTime + activeFrameTime;
106
+ if (!isIdleScheduled) {
107
+ isIdleScheduled = true;
108
+ window.postMessage(messageKey, '*');
109
+ }
110
+ var callback = scheduledRAFCallback;
111
+ scheduledRAFCallback = null;
112
+ if (callback) {
113
+ callback(rafTime);
114
+ }
115
+ };
116
+
117
+ rAF = function(callback : (time : number) => void) : number {
118
+ // This assumes that we only schedule one callback at a time because that's
119
+ // how Fiber uses it.
120
+ scheduledRAFCallback = callback;
121
+ if (!isAnimationFrameScheduled) {
122
+ // If rIC didn't already schedule one, we need to schedule a frame.
123
+ isAnimationFrameScheduled = true;
124
+ requestAnimationFrame(animationTick);
125
+ }
126
+ return 0;
127
+ };
128
+
129
+ rIC = function(callback : (deadline : Deadline) => void) : number {
130
+ // This assumes that we only schedule one callback at a time because that's
131
+ // how Fiber uses it.
132
+ scheduledRICCallback = callback;
133
+ if (!isAnimationFrameScheduled) {
134
+ // If rAF didn't already schedule one, we need to schedule a frame.
135
+ // TODO: If this rAF doesn't materialize because the browser throttles, we
136
+ // might want to still have setTimeout trigger rIC as a backup to ensure
137
+ // that we keep performing work.
138
+ isAnimationFrameScheduled = true;
139
+ requestAnimationFrame(animationTick);
140
+ }
141
+ return 0;
142
+ };
143
+} else {
144
+ rAF = requestAnimationFrame;
145
+ rIC = requestIdleCallback;
146
+}
147
+
148
+exports.rAF = rAF;
149
+exports.rIC = rIC;
src/renderers/shared/fiber/ReactFiberReconciler.js
+2
-2
@@ -67,8 +67,8 @@ export type HostConfig<T, P, I, TI, PI, C, CX, PL> = {
67
insertBefore(parentInstance : I | C, child : I | TI, beforeChild : I | TI) : void,
68
removeChild(parentInstance : I | C, child : I | TI) : void,
69
70
- scheduleAnimationCallback(callback : () => void) : void,
71
- scheduleDeferredCallback(callback : (deadline : Deadline) => void) : void,
70
+ scheduleAnimationCallback(callback : () => void) : number | void,
71
+ scheduleDeferredCallback(callback : (deadline : Deadline) => void) : number | void,
72
73
prepareForCommit() : void,
74
resetAfterCommit() : void,