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

Worker transfer benchmark #7145

Merged
merged 5 commits into from
Aug 17, 2018
Merged

Worker transfer benchmark #7145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e075a44
make the layout bench more extensible
mourner Aug 16, 2018
e5adac0
add a worker transfer benchmark
mourner Aug 17, 2018
e5a891b
Extract and reuse utility methods from Layout benchmark
jfirebaugh Aug 17, 2018
2a6944b
refactor benchmarks further
mourner Aug 17, 2018
d60fa1e
include deserialization in worker transfer bench; denser tiles
mourner Aug 17, 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
2 changes: 2 additions & 0 deletions bench/benchmarks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ function register(Benchmark) {

import Layout from './benchmarks/layout';
import LayoutDDS from './benchmarks/layout_dds';
import WorkerTransfer from './benchmarks/worker_transfer';
import Paint from './benchmarks/paint';
import PaintStates from './benchmarks/paint_states';
import LayerBenchmarks from './benchmarks/layers';
Expand All @@ -31,6 +32,7 @@ import FilterEvaluate from './benchmarks/filter_evaluate';

register(Layout);
register(LayoutDDS);
register(WorkerTransfer);
register(Paint);
register(PaintStates);
LayerBenchmarks.forEach(register);
Expand Down
130 changes: 20 additions & 110 deletions bench/benchmarks/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,134 +1,44 @@
// @flow

import Benchmark from '../lib/benchmark';

import createStyle from '../lib/create_style';
import VT from '@mapbox/vector-tile';
import Protobuf from 'pbf';
import assert from 'assert';
import promisify from 'pify';
import WorkerTile from '../../src/source/worker_tile';
import StyleLayerIndex from '../../src/style/style_layer_index';
import deref from '../../src/style-spec/deref';
import fetchStyle from '../lib/fetch_style';
import TileParser from '../lib/tile_parser';
import { OverscaledTileID } from '../../src/source/tile_id';
import { normalizeStyleURL, normalizeSourceURL, normalizeTileURL } from '../../src/util/mapbox';

import type {TileJSON} from '../../src/types/tilejson';
import type {StyleSpecification} from '../../src/style-spec/types';

// Note: this class is extended in turn by the LayoutDDS benchmark.
export default class Layout extends Benchmark {
glyphs: Object;
icons: Object;
workerTile: WorkerTile;
layerIndex: StyleLayerIndex;
tiles: Array<{tileID: OverscaledTileID, buffer: ArrayBuffer}>;
parser: TileParser;

tileIDs(): Array<OverscaledTileID> {
return [
setup(): Promise<void> {
const tileIDs = [
new OverscaledTileID(12, 0, 12, 655, 1583),
new OverscaledTileID(8, 0, 8, 40, 98),
new OverscaledTileID(4, 0, 4, 3, 6),
new OverscaledTileID(0, 0, 0, 0, 0)
];
}

sourceID(): string {
return 'composite';
}

fetchStyle(): Promise<StyleSpecification> {
return fetch(normalizeStyleURL(`mapbox://styles/mapbox/streets-v9`))
.then(response => response.json());
}

fetchTiles(styleJSON: StyleSpecification): Promise<Array<{tileID: OverscaledTileID, buffer: ArrayBuffer}>> {
const sourceURL: string = (styleJSON.sources[this.sourceID()]: any).url;
return fetch(normalizeSourceURL(sourceURL))
.then(response => response.json())
.then((tileJSON: TileJSON) => {
return Promise.all(this.tileIDs().map(tileID => {
return fetch((normalizeTileURL(tileID.canonical.url(tileJSON.tiles))))
.then(response => response.arrayBuffer())
.then(buffer => ({tileID, buffer}));
}));
});
}

setup(): Promise<void> {
return this.fetchStyle()
return fetchStyle(`mapbox://styles/mapbox/streets-v9`)
.then((styleJSON) => {
this.layerIndex = new StyleLayerIndex(deref(styleJSON.layers));
return Promise.all([createStyle(styleJSON), this.fetchTiles(styleJSON)]);
this.parser = new TileParser(styleJSON, 'composite');
return this.parser.setup();
})
.then(([style, tiles]) => {
.then(() => {
return Promise.all(tileIDs.map(tileID => this.parser.fetchTile(tileID)));
})
.then((tiles) => {
this.tiles = tiles;
this.glyphs = {};
this.icons = {};

const preloadGlyphs = (params, callback) => {
style.getGlyphs('', params, (err, glyphs) => {
this.glyphs[JSON.stringify(params)] = glyphs;
callback(err, glyphs);
});
};

const preloadImages = (params, callback) => {
style.getImages('', params, (err, icons) => {
this.icons[JSON.stringify(params)] = icons;
callback(err, icons);
});
};

return this.bench(preloadGlyphs, preloadImages);
});
// parse tiles once to populate glyph/icon cache
return Promise.all(tiles.map(tile => this.parser.parseTile(tile)));
})
.then(() => {});
}

bench(getGlyphs: Function = (params, callback) => callback(null, this.glyphs[JSON.stringify(params)]),
getImages: Function = (params, callback) => callback(null, this.icons[JSON.stringify(params)])) {

const actor = {
send(action, params, callback) {
setTimeout(() => {
if (action === 'getImages') {
getImages(params, callback);
} else if (action === 'getGlyphs') {
getGlyphs(params, callback);
} else assert(false);
}, 0);
}
};

let promise: Promise<void> = Promise.resolve();

for (const {tileID, buffer} of this.tiles) {
bench() {
let promise = Promise.resolve();
for (const tile of this.tiles) {
promise = promise.then(() => {
const workerTile = new WorkerTile({
tileID: tileID,
zoom: tileID.overscaledZ,
tileSize: 512,
overscaling: 1,
showCollisionBoxes: false,
source: this.sourceID(),
uid: '0',
maxZoom: 22,
pixelRatio: 1,
request: {
url: ''
},
angle: 0,
pitch: 0,
cameraToCenterDistance: 0,
cameraToTileDistance: 0
});

const tile = new VT.VectorTile(new Protobuf(buffer));
const parse = promisify(workerTile.parse.bind(workerTile));

return parse(tile, this.layerIndex, actor);
return this.parser.parseTile(tile).then(() => {});
});
}

return promise;
}
}
51 changes: 33 additions & 18 deletions bench/benchmarks/layout_dds.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,21 @@
// @flow

import Layout from './layout';

import Benchmark from '../lib/benchmark';
import TileParser from '../lib/tile_parser';
import { OverscaledTileID } from '../../src/source/tile_id';

import type {StyleSpecification} from '../../src/style-spec/types';

const LAYER_COUNT = 2;

export default class LayoutDDS extends Layout {
tileIDs(): Array<OverscaledTileID> {
return [
export default class LayoutDDS extends Benchmark {
tiles: Array<{tileID: OverscaledTileID, buffer: ArrayBuffer}>;
parser: TileParser;

setup(): Promise<void> {
const tileIDs = [
new OverscaledTileID(15, 0, 15, 9373, 12535)
];
}

sourceID(): string {
return 'mapbox';
}

fetchStyle(): Promise<StyleSpecification> {
const style = {
const styleJSON = {
"version": 8,
"sources": {
"mapbox": { "type": "vector", "url": "mapbox://mapbox.mapbox-streets-v7" }
Expand Down Expand Up @@ -85,14 +80,34 @@ export default class LayoutDDS extends Layout {
}
];

while (style.layers.length < LAYER_COUNT) {
while (styleJSON.layers.length < LAYER_COUNT) {
for (const layer of layers) {
style.layers.push(Object.assign(({}: any), layer, {
id: layer.id + style.layers.length
styleJSON.layers.push(Object.assign(({}: any), layer, {
id: layer.id + styleJSON.layers.length
}));
}
}

return Promise.resolve(style);
this.parser = new TileParser(styleJSON, 'mapbox');
return this.parser.setup()
.then(() => {
return Promise.all(tileIDs.map(tileID => this.parser.fetchTile(tileID)));
})
.then((tiles) => {
this.tiles = tiles;
// parse tiles once to populate glyph/icon cache
return Promise.all(tiles.map(tile => this.parser.parseTile(tile)));
})
.then(() => {});
}

bench() {
let promise = Promise.resolve();
for (const tile of this.tiles) {
promise = promise.then(() => {
return this.parser.parseTile(tile).then(() => {});
});
}
return promise;
}
}
81 changes: 81 additions & 0 deletions bench/benchmarks/worker_transfer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
// @flow

import Benchmark from '../lib/benchmark';
import fetchStyle from '../lib/fetch_style';
import TileParser from '../lib/tile_parser';
import { OverscaledTileID } from '../../src/source/tile_id';
import { serialize, deserialize } from '../../src/util/web_worker_transfer';
import { values } from '../../src/util/util';

export default class WorkerTransfer extends Benchmark {
parser: TileParser;
payloadTiles: Array<any>;
payloadJSON: Array<any>;
worker: Worker;

setup(): Promise<void> {
const src = `
onmessage = (e) => {
postMessage(e.data);
};
`;
const url = window.URL.createObjectURL(new Blob([src], {type: 'text/javascript'}));
this.worker = new Worker(url);

const tileIDs = [
new OverscaledTileID(8, 0, 8, 73, 97),
new OverscaledTileID(11, 0, 11, 585, 783),
new OverscaledTileID(11, 0, 11, 596, 775),
new OverscaledTileID(13, 0, 13, 2412, 3079)
];

return fetchStyle(`mapbox://styles/mapbox/streets-v9`)
.then((styleJSON) => {
this.parser = new TileParser(styleJSON, 'composite');
return this.parser.setup();
})
.then(() => {
return Promise.all(tileIDs.map(tileID => this.parser.fetchTile(tileID)));
})
.then((tiles) => {
return Promise.all(tiles.map(tile => this.parser.parseTile(tile)));
}).then((tileResults) => {
const payload = tileResults
.concat(values(this.parser.icons))
.concat(values(this.parser.glyphs)).map((obj) => serialize(obj, []));
this.payloadJSON = payload.map(barePayload);
this.payloadTiles = payload.slice(0, tileResults.length);
});
}

sendPayload(obj: any) {
return new Promise((resolve) => {
this.worker.onmessage = () => resolve();
this.worker.postMessage(obj);
});
}

bench(): Promise<void> {
let promise: Promise<void> = Promise.resolve();

// benchmark sending raw JSON payload
for (const obj of this.payloadJSON) {
promise = promise.then(() => {
return this.sendPayload(obj);
});
}

return promise.then(() => {
// benchmark deserializing full tile payload because it happens on the main thread
for (const obj of this.payloadTiles) {
deserialize(obj);
}
});
}
}

function barePayload(obj) {
// strip all transferables from a worker payload, because we can't transfer them repeatedly in the bench:
// as soon as it's transfered once, it's no longer available on the main thread
return JSON.parse(JSON.stringify(obj, (key, value) => ArrayBuffer.isView(value) ? {} : value));
}
24 changes: 0 additions & 24 deletions bench/lib/create_style.js
View file
Open in desktop

This file was deleted.

9 changes: 9 additions & 0 deletions bench/lib/fetch_style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// @flow

import type {StyleSpecification} from '../../src/style-spec/types';
import {normalizeStyleURL} from '../../src/util/mapbox';

export default function fetchStyle(url: string): Promise<StyleSpecification> {
return fetch(normalizeStyleURL(url))
.then(response => response.json());
}
Loading