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

Add budgets to Actor queue flushing #9022

Closed
wants to merge 9 commits into from
Closed

Add budgets to Actor queue flushing #9022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2f4d84f
Using rAF based throttled queue on main thread
Nov 23, 2019
d2405ce
Cleanup logic and add bugets to `process()`
Nov 25, 2019
04314f9
Fix lint errors
Nov 25, 2019
c377bb3
Fix lint error in Actor
Nov 25, 2019
ede3ca1
Fix globalScope check
Nov 25, 2019
fa6a0ec
Add per tick budget to worker side as well
Nov 26, 2019
7959ae0
Fix lint errors
Nov 26, 2019
ff8f2a9
Fix some comment typos
Nov 26, 2019
eb2a581
Cleanup comment
Nov 26, 2019
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
39 changes: 39 additions & 0 deletions debug/tile-cancellation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS debug page</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel='stylesheet' href='../dist/mapbox-gl.css' />
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>

<body>
<div id='map'></div>

<script src='../dist/mapbox-gl-dev.js'></script>
<script src='../debug/access_token_generated.js'></script>
<script>

var map = window.map = new mapboxgl.Map({
container: 'map',
zoom: 12.5,
center: [-77.01866, 38.888],
style: 'mapbox://styles/mapbox/streets-v10',
hash: true
});

map.once('idle', function() {
map.easeTo({center: [-77.01866, 38.888], zoom: 1, duration: 1000});

setTimeout(function() {
map.easeTo({center: [-77.01866, 38.888], zoom: 12.5, duration: 1000});
}, 1200);
});

</script>
</body>
</html>
54 changes: 33 additions & 21 deletions src/util/actor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,23 @@

import {bindAll, isWorker, isSafari} from './util';
import window from './window';
import browser from './browser';
import {serialize, deserialize} from './web_worker_transfer';
import ThrottledInvoker from './throttled_invoker';

import type {Transferable} from '../types/transferable';
import type {Cancelable} from '../types/cancelable';

// Upper limit on time in ms, the actor allocates towards flushing the task queue per frame
const MAIN_THREAD_TIME_BUDGET = 1;
Copy link
Member

Choose a reason for hiding this comment

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

We're measuring time in integer milliseconds, so a limit of 1ms very coarse.

// Upper limit of number of tasks executed in a frame in the main thread
const MAIN_THREAD_TASK_BUDGET = 10;

// Upper limit on time in ms, the actor allocates towards flushing the task queue per worker tick, see throttled_invoker.js
const WORKER_THREAD_TIME_BUDGET = 2;
// Upper limit of number of tasks executed per worker tick as per throttled_invoker.
const WORKER_THREAD_TASK_BUDGET = 20;

/**
* An implementation of the [Actor design pattern](http://en.wikipedia.org/wiki/Actor_model)
* that maintains the relationship between asynchronous tasks and the objects
Expand All @@ -30,19 +41,21 @@ class Actor {
cancelCallbacks: { number: Cancelable };
invoker: ThrottledInvoker;
globalScope: any;
isWorker: boolean;

constructor(target: any, parent: any, mapId: ?number) {
this.target = target;
this.parent = parent;
this.mapId = mapId;
this.isWorker = isWorker();
this.callbacks = {};
this.tasks = {};
this.taskQueue = [];
this.cancelCallbacks = {};
bindAll(['receive', 'process'], this);
this.invoker = new ThrottledInvoker(this.process);
this.target.addEventListener('message', this.receive, false);
this.globalScope = isWorker() ? target : window;
this.globalScope = this.isWorker ? target : window;
}

/**
Expand Down Expand Up @@ -110,42 +123,41 @@ class Actor {
cancel();
}
} else {
// In workers, store the tasks that we need to process before actually processing them. This
// is necessary because we want to keep receiving messages, and in particular,
// <cancel> messages. Some tasks may take a while in the worker thread, so before
// executing the next task in our queue, postMessage preempts this and <cancel>
// messages can be processed. We're using a MessageChannel object to get throttle the
// process() flow to one at a time.
this.tasks[id] = data;
this.taskQueue.push(id);
if (isWorker()) {
this.invoker.trigger();
} else {
// In the main thread, process messages immediately so that other work does not slip in
// between getting partial data back from workers.
this.process();
}
this.invoker.trigger();
}
}

process() {
if (!this.taskQueue.length) {
return;
}
const id = this.taskQueue.shift();
const task = this.tasks[id];
delete this.tasks[id];
// Schedule another process call if we know there's more to process _before_ invoking the
// current task. This is necessary so that processing continues even if the current task
// doesn't execute successfully.

const timeBudget = this.isWorker ? WORKER_THREAD_TIME_BUDGET : MAIN_THREAD_TIME_BUDGET;
const taskBudget = this.isWorker ? WORKER_THREAD_TASK_BUDGET : MAIN_THREAD_TASK_BUDGET;

const start = browser.now();
let taskCtr = 0;
while (browser.now() - start < timeBudget && taskCtr < taskBudget && this.taskQueue.length > 0) {
this._processQueueTop();
taskCtr++;
}
// We've reached our budget for this frame, defer processing of the rest of the tasks to the next tick,
// this allows the deferred tasks to be preempted on slower browsers.
if (this.taskQueue.length) {
this.invoker.trigger();
}
}

_processQueueTop() {
const id = this.taskQueue.shift();
const task = this.tasks[id];
delete this.tasks[id];
if (!task) {
// If the task ID doesn't have associated task data anymore, it was canceled.
return;
}

if (task.type === '<response>') {
// The done() function in the counterpart has been called, and we are now
// firing the callback in the originating actor, if there is one.
Expand Down
49 changes: 34 additions & 15 deletions src/util/throttled_invoker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,64 @@
// @flow
import window from './window';
import {isWorker} from './util';

const raf = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
/**
* Invokes the wrapped function in a non-blocking way when trigger() is called. Invocation requests
* are ignored until the function was actually invoked.
*
* On the main thread, this uses requestAnimationFrame so the deferral of tasks is as low-latency with the render loop as possible.
* In the WebWorker context, we use a `MessageChannel` to send a message back to the same context, with a fallback to `setTimeout(..,0)`.
*
* @private
*/
class ThrottledInvoker {
_channel: MessageChannel;
_channel: ?MessageChannel;
_triggered: boolean;
_callback: Function
_callback: Function;
_bindFunc: Function;
_isWorker: boolean;

constructor(callback: Function) {
this._callback = callback;
this._triggered = false;
if (typeof MessageChannel !== 'undefined') {
this._channel = new MessageChannel();
this._channel.port2.onmessage = () => {
this._triggered = false;
this._callback();
};
// The function actually bound to the callback runner.
this._bindFunc = () => {
this._triggered = false;
this._callback();
};
this._isWorker = isWorker();
if (this._isWorker) {
if (typeof MessageChannel !== 'undefined') {
this._channel = new MessageChannel();
this._channel.port2.onmessage = this._bindFunc;
}
}
}

trigger() {
if (!this._triggered) {
this._triggered = true;
if (this._channel) {
this._channel.port1.postMessage(true);
//Invoker is MessageChannel/setTimeout on worker side
if (this._isWorker) {
if (this._channel) {
this._channel.port1.postMessage(true);
} else {
setTimeout(this._bindFunc, 0);
}
// requestAnimationFrame on the Main Thread.
} else {
setTimeout(() => {
this._triggered = false;
this._callback();
}, 0);
raf(this._bindFunc);
}
}
}

remove() {
delete this._channel;
this._callback = () => {};
this._bindFunc = () => {};
}
}

Expand Down