add placement benchmark (#9077)

bench/benchmarks/placement.js

@@ -0,0 +1,61 @@
+// @flow
+
+import Benchmark from '../lib/benchmark';
+import createMap from '../lib/create_map';
+import type Map from '../../src/ui/map';
+
+const width = 1024;
+const height = 768;
+
+export default class Paint extends Benchmark {
+    style: string;
+    locations: Array<Object>;
+    maps: Array<Map>;
+
+    constructor(style: string, locations: Array<Object>) {
+        super();
+        this.style = style;
+        this.locations = locations;
+    }
+
+    setup(): Promise<void> {
+        return Promise.all(this.locations.map(location => {
+            return createMap({
+                zoom: location.zoom,
+                width,
+                height,
+                center: location.center,
+                style: this.style,
+                idle: true
+            });
+        }))
+            .then(maps => {
+                this.maps = maps;
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    }
+
+    bench() {
+        for (const map of this.maps) {
+            const showCollisionBoxes = false;
+            const fadeDuration = 300;
+            const crossSourceCollisions = true;
+            const forceFullPlacement = true;
+
+            map.style._updatePlacement(
+                map.transform,
+                showCollisionBoxes,
+                fadeDuration,
+                crossSourceCollisions,
+                forceFullPlacement);
+        }
+    }
+
+    teardown() {
+        for (const map of this.maps) {
+            map.remove();
+        }
+    }
+}

bench/lib/create_map.js

@@ -17,7 +17,7 @@ export default function (options: any): Promise<Map> {
         }, options));
 
         map
-            .on('load', () => {
+            .on(options.idle ? 'idle' : 'load', () => {
                 // Stub out `_rerender`; benchmarks need to be the only trigger of `_render` from here on out.
                 map._rerender = () => {};
 

bench/versions/benchmarks.js

@@ -3,6 +3,7 @@ import accessToken from '../lib/access_token';
 import locationsWithTileID from '../lib/locations_with_tile_id';
 import styleBenchmarkLocations from '@mapbox/gazetteer/benchmark/style-benchmark-locations.json';
 import Layout from '../benchmarks/layout';
+import Placement from '../benchmarks/placement';
 import LayoutDDS from '../benchmarks/layout_dds';
 import SymbolLayout from '../benchmarks/symbol_layout';
 import WorkerTransfer from '../benchmarks/worker_transfer';
@@ -43,6 +44,7 @@ register('Paint', new Paint(style, locations));
 register('QueryPoint', new QueryPoint(style, locations));
 register('QueryBox', new QueryBox(style, locations));
 register('Layout', new Layout(style));
+register('Placement', new Placement(style, locations));
 register('Validate', new Validate(style));
 register('StyleLayerCreate', new StyleLayerCreate(style));
 register('FunctionCreate', new FunctionCreate(style));

src/style/style.js

@@ -1206,7 +1206,7 @@ class Style extends Evented {
         }
     }
 
-    _updatePlacement(transform: Transform, showCollisionBoxes: boolean, fadeDuration: number, crossSourceCollisions: boolean) {
+    _updatePlacement(transform: Transform, showCollisionBoxes: boolean, fadeDuration: number, crossSourceCollisions: boolean, forceFullPlacement: boolean = false) {
         let symbolBucketsChanged = false;
         let placementCommitted = false;
 
@@ -1234,7 +1234,7 @@ class Style extends Evented {
         // We need to restart placement to keep layer indices in sync.
         // Also force full placement when fadeDuration === 0 to ensure that newly loaded
         // tiles will fully display symbols in their first frame
-        const forceFullPlacement = this._layerOrderChanged || fadeDuration === 0;
+        forceFullPlacement = forceFullPlacement || this._layerOrderChanged || fadeDuration === 0;
 
         if (forceFullPlacement || !this.pauseablePlacement || (this.pauseablePlacement.isDone() && !this.placement.stillRecent(browser.now(), transform.zoom))) {
             this.pauseablePlacement = new PauseablePlacement(transform, this._order, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions, this.placement);