Add placementTime metric

src/style/pauseable_placement.js

@@ -3,6 +3,7 @@
 import browser from '../util/browser.js';
 
 import {Placement} from '../symbol/placement.js';
+import {PerformanceUtils} from '../util/performance.js';
 
 import type Transform from '../geo/transform.js';
 import type StyleLayer from './style_layer.js';
@@ -29,7 +30,6 @@ class LayerPlacement {
     }
 
     continuePlacement(tiles: Array<Tile>, placement: Placement, showCollisionBoxes: boolean, styleLayer: StyleLayer, shouldPausePlacement: () => boolean) {
-
         const bucketParts = this._bucketParts;
 
         while (this._currentTileIndex < tiles.length) {
@@ -109,6 +109,7 @@ class PauseablePlacement {
                 const pausePlacement = this._inProgressLayer.continuePlacement(layerTiles[layer.source], this.placement, this._showCollisionBoxes, layer, shouldPausePlacement);
 
                 if (pausePlacement) {
+                    PerformanceUtils.recordPlacementTime(browser.now() - startTime);
                     // We didn't finish placing all layers within 2ms,
                     // but we can keep rendering with a partial placement
                     // We'll resume here on the next frame
@@ -120,7 +121,7 @@ class PauseablePlacement {
 
             this._currentPlacementIndex--;
         }
-
+        PerformanceUtils.recordPlacementTime(browser.now() - startTime);
         this._done = true;
     }
 

src/util/performance.js

@@ -17,7 +17,8 @@ export type PerformanceMetrics = {
     workerInitialization: number,
     workerEvaluateScript: number,
     workerIdle: number,
-    workerIdlePercent: number
+    workerIdlePercent: number,
+    placementTime: number
 };
 
 export const PerformanceMarkers = {
@@ -27,7 +28,9 @@ export const PerformanceMarkers = {
 };
 
 let lastFrameTime = null;
+let fullLoadFinished = false;
 let frameTimes = [];
+let placementTime = 0;
 const frameSequences = [frameTimes];
 let i = 0;
 
@@ -45,6 +48,10 @@ const frameTimeTarget = 1000 / framerateTarget;
 export const PerformanceUtils = {
     mark(marker: $Keys<typeof PerformanceMarkers>) {
         performance.mark(marker);
+
+        if (marker === PerformanceMarkers.fullLoad) {
+            fullLoadFinished = true;
+        }
     },
     measure(name: string, begin?: string, end?: string) {
         performance.measure(name, begin, end);
@@ -60,6 +67,14 @@ export const PerformanceUtils = {
     endMeasure(m: { name: string, mark: string }) {
         performance.measure(m.name, m.mark);
     },
+    recordPlacementTime(time: number) {
+        // Ignore placementTimes during loading
+        if (!fullLoadFinished) {
+            return;
+        }
+
+        placementTime += time;
+    },
     frame(timestamp: number, isRenderFrame: boolean) {
         const currTimestamp = timestamp;
         if (lastFrameTime != null) {
@@ -78,6 +93,9 @@ export const PerformanceUtils = {
     clearMetrics() {
         lastFrameTime = null;
         frameTimes = [];
+        placementTime = 0;
+        fullLoadFinished = false;
+
         performance.clearMeasures('loadTime');
         performance.clearMeasures('fullLoadTime');
 
@@ -149,6 +167,8 @@ export const PerformanceUtils = {
             metrics.cpuFrameBudgetExceeded += Math.max(0, renderFrame.duration - CPU_FRAME_BUDGET);
         }
 
+        metrics.placementTime = placementTime;
+
         return metrics;
     },