Improve scheduling of requestIdleCallback tasks (#3477)

master
Nolan Lawson 8 years ago committed by Eugen Rochko
parent 3652a39de0
commit 0e12a8dab9
  1. 3
      app/javascript/mastodon/components/status.js
  2. 29
      app/javascript/mastodon/features/ui/util/schedule_idle_task.js
  3. 1
      package.json
  4. 4
      yarn.lock

@ -14,6 +14,7 @@ import { FormattedMessage } from 'react-intl';
import emojify from '../emoji'; import emojify from '../emoji';
import escapeTextContentForBrowser from 'escape-html'; import escapeTextContentForBrowser from 'escape-html';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import scheduleIdleTask from '../features/ui/util/schedule_idle_task';
class Status extends ImmutablePureComponent { class Status extends ImmutablePureComponent {
@ -92,7 +93,7 @@ class Status extends ImmutablePureComponent {
const isIntersecting = entry.intersectionRatio > 0; const isIntersecting = entry.intersectionRatio > 0;
this.setState((prevState) => { this.setState((prevState) => {
if (prevState.isIntersecting && !isIntersecting) { if (prevState.isIntersecting && !isIntersecting) {
requestIdleCallback(this.hideIfNotIntersecting); scheduleIdleTask(this.hideIfNotIntersecting);
} }
return { return {
isIntersecting: isIntersecting, isIntersecting: isIntersecting,

@ -0,0 +1,29 @@
// Wrapper to call requestIdleCallback() to schedule low-priority work.
// See https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API
// for a good breakdown of the concepts behind this.
import Queue from 'tiny-queue';
const taskQueue = new Queue();
let runningRequestIdleCallback = false;
function runTasks(deadline) {
while (taskQueue.length && deadline.timeRemaining() > 0) {
taskQueue.shift()();
}
if (taskQueue.length) {
requestIdleCallback(runTasks);
} else {
runningRequestIdleCallback = false;
}
}
function scheduleIdleTask(task) {
taskQueue.push(task);
if (!runningRequestIdleCallback) {
runningRequestIdleCallback = true;
requestIdleCallback(runTasks);
}
}
export default scheduleIdleTask;

@ -105,6 +105,7 @@
"stringz": "^0.2.0", "stringz": "^0.2.0",
"style-loader": "^0.16.1", "style-loader": "^0.16.1",
"throng": "^4.0.0", "throng": "^4.0.0",
"tiny-queue": "^0.2.1",
"uuid": "^3.0.1", "uuid": "^3.0.1",
"uws": "^0.14.5", "uws": "^0.14.5",
"webpack": "^2.5.1", "webpack": "^2.5.1",

@ -6510,6 +6510,10 @@ tiny-emitter@1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-1.0.2.tgz#8e49470d3f55f89e247210368a6bb9fb51aa1601" resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-1.0.2.tgz#8e49470d3f55f89e247210368a6bb9fb51aa1601"
tiny-queue@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/tiny-queue/-/tiny-queue-0.2.1.tgz#25a67f2c6e253b2ca941977b5ef7442ef97a6046"
to-arraybuffer@^1.0.0: to-arraybuffer@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43" resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"

Loading…
Cancel
Save